/* -------------------- section lower-mv -------------------- */

.lower-mv-upper{
  height: 440px;
  display: flex;
  align-items: center;
  background-color: #ECF4F7;
}

#lower h1{
  font-size: 100px;
  color: #00619F;
  font-weight: 600;
  font-family: "Barlow Condensed", sans-serif;;
  margin: 0 0 0 50px;
}

#lower h1 span{
  font-size: 20px;
  line-height: 1;
  display: block;
  color: #1d1d1d;
}

img.lower-mv-img{
  width: 100%;
}

@media (max-width: 600px){
.lower-mv-upper {
    height: 320px;
}
#lower h1 {
    font-size:70px;
    margin: 0 0 0 20px;
    line-height: 1.2;
}
img.lower-mv-img {
    height: 320px;
    object-fit: cover;
    object-position: center;
}
#lower h1 span {
    font-size: 16px;
}
}
/* -------------------- section aboutus -------------------- */

/* ========================
   section about 
======================== */

#about{
    width: 100%;
    padding: 140px 0 0 0;
}

#lower h2{
  font-size: 40px;
  font-weight: 700;
  display: inline-block;
}

#about p{
  margin-top: 40px;
}

#about ul{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4.166%;
  margin-top: 40px;
}
#about li{
    width: 16.666%;
}
#about li span{
    width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid #ccc;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

img.about-icon-img{
  width: 50%;
  aspect-ratio: 1 / 1;
}

#about .service-title{
  margin-top: 8px;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 600px){
#about{
    padding: 60px 0 0 0;
}
#lower h2 {
    font-size: 24px;
}
#about ul{
  gap: 5%;
  row-gap: 20px;
}
#about li{
    width: 30%;
}
}

/* ========================
   section feature 
======================== */

#feature {
    width: 100%;
    padding: 140px 0 0 0;
}

#feature p{
  margin-top: 40px;
}

.casestudy{
  background-color: #F4F3EF;
  padding: 60px;
    margin-top: 40px;
    border-radius: 16px;
}

.cs-title{
  font-size: 20px;
  font-weight: 500;
  vertical-align: middle;
  text-align: left;
}
.cs-heading{
  color: #fff;
  padding: 4px 12px;
  margin-right: 12px;
  background-color: #1d1d1d;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-block;
}

.figure-wrap{
  display: flex;
  gap: 40px;
  margin-top: 40px;
}

.figure-item{
  width: 520px;
  background-color: #fff;
  border-radius: 10px;
  padding: 40px;
}

@media (max-width: 1200px){
.figure-wrap {
    flex-direction: column;
     align-items: center;
    margin-top: 20px;
    row-gap: 20px;
}
img.figure-img{
  width: 100%;
  max-width: 520px;
}
.cs-heading{
  margin-bottom: 8px;
}
}

@media (max-width: 600px){
#feature {
    padding: 60px 0 0 0;
}
#feature p {
    margin-top: 20px;
}
.casestudy {
    padding: 20px;
    margin-top: 20px;
    border-radius: 10px;
}

.cs-heading{
  font-size: 14px;
}
.cs-title{
  font-size: 15px;
}

.figure-item {
    width: 100%;
    border-radius: 6px;
    padding: 20px;
}


}

/* ========================
   section overview 
======================== */

#overview {
    width: 100%;
    padding: 140px 0;
}


#overview dl{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
    margin-top: 40px;
}

#overview dt{
  width: 30%;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #F4F3EF;
  margin-top: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;

}

#overview dd{
  width: 70%;
   padding: 20px;
     border: 1px solid #ccc;
     background-color: #fff;
       margin-top: -1px;
       margin-left: -1px;
       text-align: left;
}

@media (max-width: 600px){
#overview {
    padding: 60px 0;
}
#overview dl{
    margin-top: 20px;
}
#overview dt {
    padding: 10px;
}
}

/* -------------------- section service -------------------- */

/* ========================
   section scenario
======================== */

#scenario {
    width: 100%;
    padding: 140px 0 0 0;
}

p.service-lead{
  margin-top: 40px;
}
.service-wrap {
  display: flex;
  gap: 30px;
    margin-top: 40px;
    align-items:flex-start;
}

ul.service-list {
  width: calc(100% - 390px);
  text-align: left;
  padding: 30px;
  border: 1px solid #ccc;
  border-radius: 10px;

}

.service-list li{
  margin-bottom: 12px;
  font-weight: 500;
  padding-left:1.5em;
  text-indent:-1.5em;
}

.service-list li:last-child{
  margin-bottom: 0;
}


.service-list li::before {
  content: url(/wp-content/uploads/2026/02/checkbox.svg);
  margin-right: 8px;
}

.service-img {
  width: 360px;
  border-radius: 10px;
}

.flow-title{
  font-size: 20px;
  background-color: #007AC7;
  border-radius: 6px;
  color: #fff;
  padding: 10px;

  font-weight: 600;
}

.cs-wrap{
  background-color: #fff;
  padding: 50px;
    margin-top: 40px;
    border-radius: 10px;
}
.flow-wrap{
  display: flex;
}

.flow-item{
  width: 300px;
  background-color: #F4F3EF;
  border-radius: 6px;
  padding: 20px;
  margin-top: 20px;
}

.flow-heading{
  font-size: 20px;
  font-weight: 600;
}

.arrow-wrap{
  display: flex;
  align-items: center;
}
img.flow-arrow{
  width: 22px;
  margin: 0 9px;

}

.flow-item p{
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  margin-top: 12px;
}
@media (max-width: 900px){
.service-wrap {
    flex-direction: column;
        margin-top: 20px;
         gap: 20px;
         align-items: center;
}
.service-img {
    max-width: 450px;
    width: 100%;
    border-radius: 6px;
}
ul.service-list {
    width: 100%;

}
.flow-wrap {
    flex-direction: column;
    text-align: center;
    width: 100%;
    margin-top: 40px;
}

.flow-item {
    width: 100%;
    margin-top: 0;
}
img.flow-arrow {
transform: rotate(90deg);
}
.arrow-wrap{
  margin: 6px;
  display: block;
}
}
@media (max-width: 600px){
#scenario {
    padding: 60px 0 0 0;
}
p.service-lead {
    margin-top: 20px;
}

ul.service-list {
    width: 100%;
    padding: 16px;
    border-radius: 6px;

}

.cs-wrap{
  padding: 20px;
    margin-top: 20px;
    border-radius: 6px;
}
.flow-title {
    font-size: 16px;
    border-radius: 4px;
    padding: 6px;
}
.flow-wrap {
    margin-top: 20px;

}
.flow-item {
    border-radius: 4px;
    padding: 16px;
}
.flow-heading {
    font-size: 16px;
}
.flow-item p {
    font-size: 13px;
}



}


/* ========================
   section voice
======================== */

#voice {
    width: 100%;
    padding: 140px 0 0 0;
}

@media (max-width: 600px){
#voice {
    padding: 60px 0 0 0;
}
}

/* ========================
   section videos
======================== */

#videos {
    width: 100%;
    padding: 140px 0 0 0;
}
@media (max-width: 600px){
#promotion {
    padding: 60px 0;
}
}

/* ========================
   section localization
======================== */

#localization {
    width: 100%;
    padding: 140px 0;
}
@media (max-width: 600px){
#localization {
    padding: 60px 0 0 0;
}
}


/* -------------------- section works -------------------- */

/* ========================
   section works
======================== */

#works {
    width: 100%;
    padding: 140px 0;
}


.works-wrap{
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 60px;
}

.works-item{
  display: flex;
  align-items: stretch;
  width: 100%;
  padding-top: 120px;
  margin-top: -120px;
}

.works-left, .works-right{
  width: 50%;
}

img.works-img{
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px 0 0 16px;
  object-fit: cover;
  object-position: center;
}

.works-right{
  background-color: #ECF4F7;
  padding: 50px;
  text-align: left;
  border-radius: 0 16px 16px 0 ;
}

.works-right p{
  margin-top: 20px;
  text-align: justify;
}

.andmore{
	margin: 100px 0 0 0;
	font-size: 24px;
}

@media (max-width: 600px){
#works {
    padding: 60px 0;
}
.works-wrap{
  margin-top: 20px;
  row-gap: 20px;
}
.works-left, .works-right{
  width: 100%;
}
.works-item{
  flex-direction: column;
}
img.works-img {
    border-radius: 10px 10px 0 0 ;
}
.works-right {
    background-color: #ECF4F7;
    padding: 20px;
    text-align: left;
    border-radius: 0 0 10px 10px;
}
.andmore{
	margin: 50px 0 0 0;
	font-size: 18px;
}
}


/* -------------------- section writer -------------------- */

/* ========================
   section writer
======================== */

#writer {
    width: 100%;
    padding: 140px 0;
}

.writer-wrap{
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 60px;
}

.writer-item{
  display: flex;
  width: 100%;
  align-items: stretch;
  padding-top: 120px;
  margin-top: -120px;
}

.writer-left, .writer-right{
  width: 50%;
}

img.writer-img{
  width: 100%;
    height: 720px;
  border-radius: 0 16px 16px 0 ;
  object-fit: cover;
  object-position: center;
}

.writer-left{
  color: #fff;
  background-color: #113062;
  padding: 60px;
  text-align: left;
  border-radius: 16px 0 0 16px;
  display: flex;
  align-items: center;
}

.writer-left p{
  margin-top: 12px;
  text-align: justify;
}

ul.writer-works{
  background-color: #0F274D;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-top: 20px;
}

.writer-left li{
  margin-top: 10px;
  font-weight: #500;
}

.writer-left li:first-child{
  margin-top: 0;
}

@media (max-width: 900px){
img.writer-img{
    height: 100%;
}
.writer-left {
    padding: 30px;
}
}
@media (max-width: 600px){
  #writer {
    padding: 60px 0;
}

.writer-wrap{
  margin-top: 20px;
  row-gap: 20px;
}
.writer-item{
  flex-direction: column-reverse;
  vertical-align: initial;
}

.writer-left, .writer-right{
  width: 100%;
}
img.writer-img {
    height: 400px;
    border-radius: 10px 10px 0 0;
}
.writer-left {
    padding: 20px;
    border-radius: 0 0 10px 10px;
    display: flex;
    align-items: center;
}
}
/* -------------------- section contact -------------------- */

/* ========================
   section contact
======================== */

#contact {
    width: 100%;
    padding: 140px 0;
}

p.contact-lead{
  margin-top: 40px;
}

#contact dl{
    margin-top: 40px;
    padding-bottom: 60px;
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    font-size: 16px;
    line-height: 1.4;
     font-weight: 500;
}
#contact dt{
    width: 300px;
    padding: 20px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
#contact dd{
    width: calc(100% - 300px);
    font-size: 16px;
    padding: 20px;
    color: #121212;
}
.text-area{
    width: 100%;
    height: 50px;
    border-radius: 4px;
    background-color: #EFEFEF;
    border: 0;
    line-height: 1.6;
    padding: 20px;
}
.text-area01{
    height: 60px;
}
.text-area02{
    height: 240px;
}
.select01{
        width: 270px;
        text-align: center;
    height: 60px;
        border-radius: 4px;
    background-color: #EFEFEF;
        border: 0;
        font-size: 16px;
}
.required{
    font-size: 12px;
    color: #fff;
    background-color: #E271A5;
    width: 50px;
    text-align: center;
    padding: 3px 0 1px 0;
    border-radius: 2px;
    margin-right: 20px;
	display: inline-block;
}
.any{
    font-size: 12px;
    color: #fff;
    background-color: #211F27;
    width: 50px;
    text-align: center;
    padding: 3px 0 1px 0;
    border-radius: 2px;
    margin-right: 20px;
	display: inline-block;
}

.submit01{
    color: #1d1d1d;
        background-color: #fff;
    width: 300px;
    height: 60px;
    border: 1px solid #1d1d1d;
    padding-top: 2px;
    font-size: 16px;
    font-weight: 500;
        border-radius: 8px;
	margin-top: 20px;
}
.submit01:hover{
    cursor:pointer;
    color: #fff;
    background-color: #0b67a3;
}

.wpcf7-spinner{
	display: none!important;
}

@media (max-width: 900px){

#contact dt{
    width: 240px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
#contact dd{
    width: 100% ;
    padding: 0 0 20px 0;
}
}

@media (max-width: 600px){

#contact {
    padding: 60px 0;
}
p.contact-lead {
    margin-top: 20px;
}
#contact dl {
    margin-top: 20px;
    padding-bottom: 10px;
    font-size: 14px;
}
#contact dt {
        padding: 10px 0;

    }
.text-area01 {
    height: 50px;
}
.select01 {
    height: 50px;
    font-size: 14px;
}

.submit01 {
    width: 270px;
    height: 50px;
    font-size: 14px;
}
}



/* ========================
   section complete
======================== */

.complete-text{
	margin: 60px 0 0 0;
}

.button-wrap{
	margin: 60px 0 0 0;
}