@charset "UTF-8";

.header--service-edition {background:#fff;}
.header--service-edition .header__logo {width:37%;}
.header--service-edition .header__logo > a {aspect-ratio:244 / 34; background:url(/wp-content/themes/esm/assets/img/common/logo_service.svg) no-repeat 0 0 / contain;}
.header--service-edition .hml_add .item > a {color:var(--blueEdition);}
.header--service-edition .hml_add .item::after {border-color:var(--blueEdition);}

.header--service-edition .header__menu__cta li a.modBtn {padding:5px 5px;}
.header--service-edition .header__menu__cta li a.modBtn span {position:relative; padding:0 45px 0 0;}

.header--service-edition .header__menu__cta li:nth-child(1) a.modBtn span::after {margin:0 0; content:""; display:block; position:absolute; right:0; top:50%; transform:translate(0, -50%); -webkit-transform:translate(0%, -50%); -ms-transform:translate(0, -50%); width:34px; height:34px; -webkit-transition: all 0.3s ease-in-out; transition:all 0.3s ease-in-out; background:url(/wp-content/themes/esm/assets/img/common/icon_download_white.svg) no-repeat 50% 50% / contain;}

.header--service-edition .header__menu__cta li:nth-child(2) a.modBtn span::after {margin:0 0; content:""; display:block; position:absolute; right:0; top:50%; transform:translate(0, -50%); -webkit-transform:translate(0%, -50%); -ms-transform:translate(0, -50%); width:34px; height:34px; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; background:url(/wp-content/themes/esm/assets/img/common/icon_blank.svg) no-repeat 50% 50% / contain;}

.main--service-edition .kv__main {position:relative; padding:0 35% 0 0;}
.main--service-edition .kv__main::after {content:""; display:block; width:670px; height:0; padding-top:calc(670px * 0.64); position:absolute; left:67%; top:50%; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); background:url(/wp-content/themes/esm/assets/img/service-edition/mv.webp) no-repeat left 50% top 50% / contain;}

.main--service-edition .kv__main__subTitle {margin:0 0 20px 0; padding:0 0; font-size:22px; font-size:2.2rem; line-height:1.5; font-weight:600; text-align:left; background:transparent; border-radius:0;}
.main--service-edition .kv__main__subTitle span {display:inline-block; padding:5px 15px;}
.main--service-edition .kv__main__subTitle span:nth-of-type(1) {color:#ffffff; background:#136DB5;}
.main--service-edition .kv__main__subTitle span:nth-of-type(2) {color:#136DB5; background:#ffffff;}

.main--service-edition .kv__main__title {margin:0 0 30px 0; max-width:680px; aspect-ratio:722 / 100;}

.main--service-edition .kv__main__flex .flexItem__subTitle {font-size:20px; font-size:2.0rem; font-weight:500;}
.main--service-edition .kv__main__flex .flexItem:nth-last-of-type(1) .flexItem__subTitle {color:#222; background:#fff;}
.main--service-edition .kv__main__flex .flexItem__title {font-size:clamp(40px, 3.77vw, 44px);}

.main--service-edition .kv__main__btn {width:auto; min-width:620px;}


.main--service-edition .section--concern .concernList {margin:0 auto; max-width:900px; justify-content:center; gap:40px 60px;}
.main--service-edition .section--concern .concernList__item {width:calc((100% - 120px) / 3);}

.main--service-edition .section--services .service__card__container {justify-content:center;}

.main--service-edition .section--services .service__iot {margin:40px 0 0 0;}
.main--service-edition .section--services .service__iot picture img {width:auto; height:auto; max-width:100%; max-height:100%;}

.main--service-edition .section--services .service__flow .flowItem__container.fic_plus {gap:0 0;}

.fic_plus > div {position:relative; width:calc((100% - 170px) / 4);}
.fic_plus > div:nth-of-type(2) {margin:0 30px 0 70px;}
.fic_plus > div:nth-of-type(1)::after {content:""; display:block; position:absolute; right:-55px; top:60px; width:40px; height:60px; background:url(/wp-content/themes/esm/assets/img/service-edition/icon_02.png) no-repeat left 50% top 50% / contain;}
.fic_plus > div:nth-of-type(2)::before {content:""; display:block; position:absolute; right:-24px; top:25%; width:18px; height:28px;
background:url(/wp-content/themes/esm/assets/img/service-edition/icon_01.png) no-repeat left 50% top 50% / contain}
.fic_plus > div:nth-of-type(2)::after {content:""; display:block; position:absolute; right:-24px; bottom:25%; width:18px; height:28px;
background:url(/wp-content/themes/esm/assets/img/service-edition/icon_01.png) no-repeat left 50% top 550% / contain;}
.fic_plus > div:nth-of-type(4) {margin:0 0 0 70px;}
.fic_plus > div > div {position:relative; padding:20px 20px; background:#e0f5fc; border-radius:20px;}
.fic_plus > div:nth-of-type(4) > div:nth-of-type(2) {margin-top:10px;}
.fic_plus > div > div > p {display:flex; flex-direction:row-reverse; justify-content:center; align-items:center; gap:0 5px; position:absolute; left:-65px; top:50%; width:60px; height:auto; padding:10px 20px 10px 0; font-size:12px; line-height:1.3; color:#fff; background:linear-gradient(-47deg, #4ba3f8 0%, #77bcff 100%); clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%);}
.fic_plus > div > div > p span {display:inline-block; width:1em;}
.fic_plus > div > div > div {width:100%;}
.fic_plus > div > div > div picture {display:block; height:205px; line-height:0.5; border-radius:10px; overflow:hidden;}
.fic_plus > div:nth-of-type(4) > div > div picture {height:120px;}
.fic_plus > div > div > div picture img {width:100%; height:100%; object-fit:cover;}
.fic_plus > div > div > div p:nth-of-type(1) {margin:15px 0 0 0; font-size:16px; font-size:1.6rem; font-weight:600; line-height:20px; color:var(--blueEdition);}
.fic_plus > div > div > div p:nth-of-type(n+2) {margin:15px 0 0 0; padding:15px 5px; font-size:14px; font-size:1.4rem; font-weight:500; line-height:20px; color:#fff; background:linear-gradient(-47deg, #4ba3f8 0%, #77bcff 100%); border-radius:5px;}
.fic_plus > div > div > div p:nth-of-type(n+3) {margin:5px 0 0 0;}


#esm_lineup div > h2 {color:#fff; background:#004ea8;}
.main--service-edition .modCta:last-child {background:-webkit-gradient(linear, left bottom, left top, color-stop(50%, #0277c3), color-stop(50%, #ffffff)); background:linear-gradient(0deg, #0277c3 50%, #ffffff 50%);}


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

.header--service-edition .header__logo {width:100%;}

.main--service-edition .kv__main {max-width:100%;}
.main--service-edition .kv__main::after {width:50%; padding-top:calc(50% * 0.64); left:auto; right:0; top:auto; bottom:0; transform:translate(0, 0); -webkit-transform:translate(0, 0); -ms-transform:translate(0, 0);}
.main--service-edition .kv__main__subTitle {font-size:15px; font-size:1.5rem;}
.main--service-edition .kv__main__flex {display:inline-flex; -webkit-box-align:start; -ms-flex-align:start; align-items:start;}
.main--service-edition .kv__main__btn {width:100%;}

.main--service-edition .section--support {padding-bottom:10%;}
#esm_lineup div {padding-bottom:10%;}

}


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

.main--service-edition .kv__main {display:flex; flex-wrap:wrap; justify-content:center; gap:0 20px; padding:0 0;}
.main--service-edition .kv__main::after {position:relative; width:50%; padding-top:calc(50% * 0.64); left:auto; right:auto; top:auto; bottom:auto;}
.main--service-edition .kv__main__title {margin:0 0 20px 0; max-width:420px;}
.main--service-edition .kv__main__flex .flexItem__subTitle {font-size:16px; font-size:1.6rem;}
.main--service-edition .kv__main__flex .flexItem__title {font-size:clamp(24px, 3.77vw, 32px);}

.main--service-edition .section--concern .concernList {gap:30px 30px;}
.main--service-edition .section--concern .concernList__item {width:calc((100% - 60px) / 3);}

.fic_plus > div {width:100%;}
.fic_plus > div:nth-of-type(2) {margin:70px 0 30px 0;}
.fic_plus > div:nth-of-type(1)::after {left:20px; top:auto; right:auto; bottom:-65px; width:60px; height:60px; transform:rotate(90deg)}
.fic_plus > div:nth-of-type(2)::before {left:25%; right:auto; top:auto; bottom:-30px; background-position:left 25% top 50%, right 25% top 50%; transform:rotate(90deg);}
.fic_plus > div:nth-of-type(2)::after {right:25%; bottom:-30px; background-position:left 25% top 50%, right 25% top 50%; transform:rotate(90deg);}
.fic_plus > div:nth-of-type(4) {display:flex; flex-direction:column; gap:20px 0; margin:70px 0 0 0;}
.fic_plus > div:nth-of-type(4) > div {width:45%;}
.fic_plus > div:nth-of-type(4) > div:nth-of-type(2) {margin-top:0; margin-left:55%;}

.fic_plus > div > div > p {flex-direction:column; gap:0 5px; left:50%; top:-65px; width:auto; height:60px; padding:0 15px 20px 15px; font-size:14px; line-height:1.5; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 50% 100%, 0 calc(100% - 20px)); transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0);}
.fic_plus > div:nth-of-type(4) > div:nth-of-type(2) > p {top:calc(-100% - 85px); height:calc(100% + 80px); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 20px), 50% 100%, 0 calc(100% - 20px));}
.fic_plus > div > div > p span {width:100%;}

}


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

.main--service-edition .kv__main::after {width:80%; padding-top:calc(80% * 0.64);}

.main--service-edition .kv__main__subTitle span {padding:5px 10px;}
.main--service-edition .kv__main__flex {margin-bottom:40px;}
.main--service-edition .kv__main__btn {min-width:0;}

.main--service-edition .section--concern .concernList {gap:20px 20px;}
.main--service-edition .section--concern .concernList__item {width:100%;}

.main--service-edition .section--concern .concernList__item__dialog {-ms-flex-direction:row; flex-direction:row; gap:5px 10px;}

.fic_plus > div > div > p {padding:0 15px 20px 15px;}
.fic_plus > div:nth-of-type(4) {margin:120px 0 0 0;}
.fic_plus > div:nth-of-type(4) > div {width:70%;}
.fic_plus > div:nth-of-type(4) > div:nth-of-type(2) {margin-left:30%;}
.fic_plus > div:nth-of-type(4) > div > p {left:20px; top:-115px; height:110px; transform:translate(0, 0); -webkit-transform:translate(0, 0); -ms-transform:translate(0, 0); line-height:1.3;}
.fic_plus > div:nth-of-type(4) > div:nth-of-type(2) > p {left:auto; right:20px; top:calc(-100% - 135px); height:calc(100% + 130px); transform:translate(0, 0); -webkit-transform:translate(0, 0); -ms-transform:translate(0, 0);}
.fic_plus > div:nth-of-type(4) > div > p span {width:1em;}

.main--service-edition .section--support {padding-bottom:15%;}
#esm_lineup div {padding-bottom:20%;}
}