@charset 'utf-8';
/* top
------------------------------------------------ */
a.top-btn{ padding-right: 14px; display: block; width: 100%; max-width: 280px; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.1em; line-height: 54px; color:#fff; text-align: center; background: rgb(50,160,239); background: url(../../img/share/arrow2.png) no-repeat calc(100% - 14px) center / 34px auto, linear-gradient(270deg, rgba(50,160,239,1) 0%, rgba(30,132,206,1) 100%); }
.top-btn:hover{ text-decoration: none; }

@media only screen and (max-width: 768px) {
    a.top-btn{ font-size: 1.4rem; line-height: 40px; max-width: 220px; background: url(../../img/share/arrow2.png) no-repeat calc(100% - 14px) center / 29px auto, linear-gradient(270deg, rgba(50,160,239,1) 0%, rgba(30,132,206,1) 100%); }
}

/* visual
------------------------------------------------ */
#visual{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; width: 100%; height: calc(100vh - 220px); background: url(../../img/visual.jpg) no-repeat center center / cover; }
.visual--desc{ padding: 0 20px; width: 100%; max-width: 1080px; color:#fff; text-align: center; }
.visual--title{ font-size: 4.6rem; font-weight: bold; letter-spacing: 0.1em; line-height: calc(72 / 46); }
.visual--desc p{ margin-top: 30px; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.1em; line-height: calc(24 / 18); }

@media only screen and (min-width: 769px) {
    #visual{ min-height: 300px; }
    [data-lang="en"] .visual--title{ font-size: 2.5rem; }
    [data-lang="en"] .visual--desc p{ font-size: 1.6rem; }
}
@media only screen and (max-width: 1100px) and (min-width: 769px) {
    .visual--title{ font-size: 4.259vw; }
    .visual--desc p{font-size: 1.66vw;}
}

@media only screen and (max-width: 768px) {
    #visual{ height: 390px; background: url(../../img/visual-sp.jpg) no-repeat center center / cover; }
    .visual--desc{ padding: 0 20px; }
    .visual--title{ font-size: 2.5rem; line-height: calc(76 / 50); letter-spacing: 0.031em; }
    .visual--desc p{ margin-top: 26px; font-size: 1.5rem; letter-spacing: 0.05em; line-height: calc(50 / 30); }

    [data-lang="en"] .visual--title{ font-size: 1.6rem; }
    [data-lang="en"] .visual--desc p{ font-size: 1.2rem; }
}

/* service
------------------------------------------------ */
#service{ padding: 80px 0 120px; }
.service--row{  width: 100%; max-width: 1130px; margin: 0 auto; }
.service--item{ position: relative; padding: 3.7% 4.6% 135px; background-color: #fff; box-shadow: 0px 0px 20px rgba(30, 132, 206, 0.3); }
.service--num{ width: 94px; display: block; margin-top: 22px; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.05em; line-height: calc(27 / 12); border: 1px solid #1e84ce; border-radius: 4px; text-align: center; color: #1e84ce; }
.service--title{ margin-top: 12px; font-size: 2rem; font-weight: bold; letter-spacing: 0.072em; line-height:  calc(27 / 20); }
.service--list{ margin-top: 15px; }
.service--list li{ position: relative; padding-left: 20px; font-weight: 400; font-size: 1.4rem; letter-spacing: 0.072em; line-height: calc(24 / 14); }
.service--list li::before{ content: ''; position: absolute; left: 0; top:8px; width: 10px; height: 10px; background-color: #1e84ce; }
.service--list li+li{ margin-top: 15px; }
.service--item a{ position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); }


@media only screen and (min-width: 769px) {
    .service--row{ padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: space-between; }
    .service--item{ width: 47.71%; }
}

@media only screen and (max-width: 768px) {
    #service{ padding: 50px 25px 60px; }
    .service--row{ }
    .service--item{ padding: 25px 22px 80px; min-height: 475px; }
    .service--item+.service--item{ margin-top: 46px; }
    .service--num{ width: 90px; margin-top: 15px; font-size: 1.3rem; border-radius: 1px; line-height: 23px; }
    .service--item a{ bottom: 30px; }
    .service--title{ margin-top: 9px; font-size: 1.6rem; line-height: 1; }
    .service--list{ margin-top: 10px; }
    .service--list li{ padding-left: 22px; font-size: 1.3rem; line-height: calc(40 / 26); }
    .service--list li::before{ top: 5px; }
    .service--list li+li{ margin-top: 12px; }
}


/* development-case
------------------------------------------------ */
#development-case{ padding: 100px 0; background: url(../../img/development-case-bg.png) no-repeat center center / cover; }
.development-case--title{ font-weight: 400; text-align: center; color:#022843; letter-spacing: 0.072em; }
.development-case--title .en{ display: block; font-size: 1.6rem; line-height: calc(27 / 16); }
.development-case--title .ja{ margin-top: 2px; display: block; font-size: 3rem; line-height: calc(41 / 30); }
.development-case--list{ margin-top: 66px; }
.development-case--list li img{ transition: .2s ease; }
.development-case--list li a{ display: block; }
.development-case--list li a:hover{ text-decoration: none; }
.development-case--list li a:hover img{ opacity: 0.8; }
.development-case--title2{ margin-top: 24px; font-size: 2.2rem; font-weight: bold; letter-spacing: 0.072em; line-height: calc(27 /22); color:#022843; }
.development-case--list p{ margin-top: 15px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(26 / 16); color:#0A64A5; }
.development-case--btn{ margin: 75px auto 0; }

@media only screen and (min-width: 769px) {
    .development-case--list{ display: flex; flex-wrap: wrap; }
    .development-case--list li{ width: 30.84%; }
    .development-case--list li:not(:nth-child(3n+1)){ margin-left: 3.73%; }
    .development-case--list li:not(:nth-child(-n+3)){ margin-top: 80px; }
}
@media only screen and (max-width: 1024px) and (min-width: 769px) {
    .development-case--title2{ font-size: 1.8rem; }
    .development-case--list p{ font-size: 1.4rem; }
}
@media only screen and (max-width: 768px) {
    #development-case{ padding: 40px 0; background: url(../../img/development-case-bg-sp.png) no-repeat center center / cover; }
    .development-case--title .en{ font-size: 1.3rem; }
    .development-case--title .ja{ margin-top: 0; font-size: 2.3rem; }
    .development-case--list{ margin-top: 27px; }
    .development-case--title2{ margin-top: 16px; font-size: 1.7rem; line-height: calc(47 / 34); }
    .development-case--list p{ margin-top: 8px; font-size: 1.4rem; line-height: calc(44 / 28); }
    .development-case--list li+li{ margin-top: 33px; }
    .development-case--btn{ margin-top: 25px; }
}

/* top-company
------------------------------------------------ */
#top-company{ padding: 90px 0; }
.top-company--list{ width: 100%; max-width: 660px; margin: 0 auto; }
.top-company--list h3{ margin-top: 10px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(22 / 16); color:#2289D4; }
.top-company--list p{ margin-top: 4px; font-size: 1.2rem; letter-spacing: 0.072em; line-height: calc(19 / 12); }
.top-company--list a:hover{ text-decoration: none; }

@media only screen and (min-width: 769px) {
    .top-company--list{display: flex; flex-wrap: wrap; justify-content: space-between; }
    .top-company--list.center{ justify-content: center; }
    .top-company--list li{ width: 42.43%; }
    .top-company--list li:not(:nth-child(-n+2)){ margin-top: 30px; }
}

@media only screen and (max-width: 768px) {
    #top-company{ padding: 60px 0 55px; }
    .top-company--list{ max-width: 240px; }
    .top-company--list h3{ margin-top: 10px; font-size: 1.5rem; line-height: calc(41 / 30); }
    .top-company--list p{ margin-top: 7px; font-size: 1.3rem; line-height: calc(40 / 26); }
    .top-company--list li+li{ margin-top: 30px; }
}

/* news
------------------------------------------------ */
#news{ padding: 45px 0 65px; background-color: #24201F; }
.news--row{ width: 100%; max-width: 948px; margin: 0 auto; }
.news-date{ font-size: 1.4rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(19 / 14); color:#E3E0E0; }

.news--list li{ transition: .2s ease; }
.news--list li a:hover{ text-decoration: none; opacity: 0.8;  }
.news--list p{ font-size: 1.6rem; font-weight: bold; letter-spacing: 0.072em; line-height: calc(24 / 16); color:#fff; }
.news--list li+li{ border-top:1px dashed #777777; }
.news--title{ color:#fff; }
.news--title span{ display: block; font-weight: 400; letter-spacing: 0.072em; }
.news--title .en{ font-size: 1.6rem; line-height: 1; }
.news--title .ja{ margin-top: 3px; font-size: 3rem; }
.news--btn{ transition: .2s ease; margin-top: 26px; display: block; width: 130px; font-size: 1.4rem; font-weight: bold; letter-spacing: 0.1em; line-height:  46px; text-align: center; color:#32A0EF !important; border: 1px solid #32a0ef; }
.news--btn:hover{ text-decoration: none; color:#fff !important; background-color: #32A0EF; }

@media only screen and (min-width: 769px) {
    .news--row{ display: flex; flex-wrap: wrap; }
    .news-col--left{ padding-top: 20px; width: 246px; }
    .news-col--right{  width: calc(100% - 246px); max-width: 68.567%; }
    .news--list li a,
    .news--no-link{ padding: 15px 0; display: flex; flex-wrap: wrap; }
    .news-date{ padding-top: 3px; width: 110px; }
    .news--list p{ width: calc(100% - 110px); }

    [data-lang="en"] .news--list p{ font-size: 1.4rem; }
}

@media only screen and (max-width: 768px) {
    #news{ padding: 45px 0 25px; }
    .news-col--left{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
    .news--title .en{ font-size: 1.3rem; }
    .news--title .ja{ margin-top: 3px; font-size: 2.3rem; }
    .news--btn{ margin: 4px 0 0; width: 100px; line-height: 40px; font-size: 1.2rem; }
    .news-date{ font-size: 1.2rem; }
    .news--list{ margin-top: 20px; }
    .news--list li a,
    .news--no-link{ display: block; padding: 16px 0; }
    .news--list p{ margin-top: 3px; font-size: 1.4rem; line-height: calc(44 / 28); }
}