@charset "UTF-8";

* {margin:0 0; padding:0 0; box-sizing:border-box;}
html, body {max-width:3840px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

section {letter-spacing:0.5px;}
ul {list-style:none;}
a {display:inline-block; text-decoration:none !important; transition:all 0.3s ease-in-out;}
a:hover {text-decoration:none !important;}
h1 {margin:0 auto; padding:0 0; font-size:68px; line-height:1.5; color:#222; letter-spacing:0.5px; text-align:center; font-weight:600;}
h2 {margin:0 auto; padding:0 0; font-size:38px; line-height:1.6; color:#222; letter-spacing:0.5px; text-align:center; font-weight:600;}
h3 {margin:0 auto; padding:0 0; font-size:20px; line-height:1.6; color:#222; letter-spacing:0.5px; text-align:center; font-weight:400;}
p {margin:0 auto; padding:0 0; font-size:14px; line-height:1.8; color:#222; letter-spacing:0.5px; text-align:center; font-weight:400;}
span {display:inline-block;}
img {width:auto; height:auto; max-width:100%; max-height:100%;}

@font-face {
  font-family: 'icomoon';
  src: url("/fonts/icomoon.eot?4hmkpr");
  src: url("/fonts/icomoon.eot?4hmkpr#iefix") format("embedded-opentype"), url("/fonts/icomoon.ttf?4hmkpr") format("truetype"), url("/fonts/icomoon.woff?4hmkpr") format("woff"), url("/fonts/icomoon.svg?4hmkpr#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media only screen and (max-width: 768px) {
h1 {font-size:40px;}
h2 {font-size:24px;}
h3 {font-size:18px;}
p {font-size:12px;}
}

@media only screen and (max-width: 430px) {
h1 {font-size:26px; line-height:1.4;}
h2 {font-size:16px; margin:0 auto 10px auto;}
h3 {font-size:14px;}
p {font-size:12px;}
}

@media only screen and (max-width: 330px) {
p {font-size:11px;}
}



header {position:fixed; left:0; top:0; width:100%; height:100px; background:#FCFDFD; box-shadow:0 2px 6px -2px #C7E4F1; z-index:100;}
header div#hdr-wrap {position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0 20px; margin:0 auto; padding:0 0; width:100%; height:100%; max-width:1240px;}

#logo {margin:0 0; padding:0 0; width:280px; height:60px; line-height:0.5;}
#logo a {height:100%; line-height:0.5; transition: all 0.3s ease-in-out;}
#logo a:hover {opacity:0.7;}

#nav_and_cta {display:flex; flex-wrap:wrap; justify-content:end; align-items:center; gap:0 30px;}
ul.cta {display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 20px; z-index:20;}
ul.cta li {margin:0 0; padding:0 0; text-align:center;}
ul.cta li a {display:inline-block; padding:15px 15px; min-width:280px; font-size:18px; line-height:30px; text-align:center; font-weight:600; letter-spacing:1px; color:#fff; background:#319EDA; border-radius:50px;}
ul.cta li:nth-of-type(1) a {background:#17B9D4;}
ul.cta li:nth-of-type(2) a {background:#FF9301;}
ul.cta li a:hover {filter:brightness(0.9);}


@media only screen and (max-width: 768px) {
#hbg {position:absolute; right:10px; top:9px; display:inline-block; width:28px; height:28px; text-indent:28px; white-space:nowrap; overflow:hidden; cursor:pointer; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}

#hbg span,
#hbg span::before,
#hbg span::after {position:absolute; top:50%; left:2px; height:2px; width:24px; background:#bbb; -webkit-transition:all 0.25s; transition:all 0.25s;}

#hbg span::before {content:""; top:-7px; left:0;}
#hbg span::after {content:""; top:7px; left:0;}

#hbg-chk:checked ~ #hbg span {height:0; background:transparent;}
#hbg-chk:checked ~ #hbg span::before {top:0; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
#hbg-chk:checked ~ #hbg span::after {top:0; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
#hbg-chk:not(:checked) ~ #nav_and_cta {display:none;}
#hbg-chk:checked ~ #nav_and_cta {display:block;}

ul.cta li a {padding:15px 20px;}
}


@media only screen and (max-width: 430px) {
ul.cta {justify-content:space-around; gap:0 10px;}
ul.cta li {width:calc((100% - 10px) / 2);}
ul.cta li a {width:100%; padding:15px 5px;}
}


@media only screen and (max-width: 330px) {
ul.cta {gap:0 5px;}
ul.cta li {width:auto;}
ul.cta li a {padding:15px 10px; font-size:14px;}
}



@media only screen and (min-width: 769px) {
div#page-top {display:block; position:fixed; right:40px; bottom:60px; margin-top:0; z-index:1100;}
div#page-top > a {overflow:hidden; display:block; width:62px; height:62px; transition:all 0.3s ease 0s; background:url(../img/up_btn.png) no-repeat 0 50%;}
div#page-top > a span {display:none;}
}


@media only screen and (max-width: 768px) {
header {height:50px; padding:0 20px;}
header .logo .inner a img {max-height:25px;}
header ul {gap:0 10px; right:10px; top:0; height:50px;}
header ul li a {padding:8px 15px; font-size:14px; border-radius:8px;}
.hml_add {display:none;}
#page-top {background:#f3f3f3;}
#page-top a {display:block; position:relative; font-size:14px; text-align:center; padding:10px 0; color:#15619d;}
#page-top a span::before {font-family:'icomoon' !important; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; content:"\e903"; display:inline-block; margin-right:10px;}
}


@media only screen and (max-width: 430px) {
header {padding:0 10px;}
header div#hdr-wrap {gap:0 20px;}
header #logo {width:110px;}
header #nav_and_cta {width:calc(100% - 20px - 110px);}
header #nav_and_cta ul.cta {justify-content:end; width:100%;}
header #nav_and_cta ul.cta li {width:auto;}
header #nav_and_cta ul.cta li:nth-last-of-type(1) {display:none;}
header #nav_and_cta ul.cta li a {display:inline-block; width:auto; padding:8px 15px; font-size:16px;}
}

@media only screen and (max-width: 330px) {
header div#hdr-wrap {gap:0 10px;}
header #logo {width:110px;}
header #nav_and_cta {width:calc(100% - 10px - 110px);}
header #nav_and_cta ul.cta li a {font-size:14px;}

}


a.modBtn:hover {filter:brightness(0.9);}
a.modBtn span {position:relative; padding:0 45px 0 0;}
a.modBtn span::after {content:""; display:block; position:absolute; right:0; top:50%; transform:translate(0, -60%); -webkit-transform:translate(0%, -60%); -ms-transform:translate(0, -60%); width:34px; height:34px; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; background:url(https://www.e-sales.jp/wp-content/themes/esm/assets/img/common/icon_arrow.svg) no-repeat 50% 50% / contain;}
a.modBtn.modBtn--download span::after {background:url(https://www.e-sales.jp/wp-content/themes/esm/assets/img/common/icon_download_white.svg) no-repeat 50% 50% / contain;}
a.modBtn:hover span::after {transform:translate(6px, -60%); -webkit-transform:translate(6px, -60%); -ms-transform:translate(6px, -60%);}


#esm_lineup {}
#esm_lineup div {}
#esm_lineup div > h2 {}
#esm_lineup div > p {}


section#sc_mv {width:100%; margin:0 auto; padding:0 0; overflow:hidden;}
section#sc_mv::after {content:""; display:block; margin:0 auto; width:100px; height:50px; background:#f5f5f5; clip-path:polygon(0 100%, 50% 0, 100% 100%);}

section#sc_mv > div#mv_box {position:relative; max-width:100%; margin:0 auto; padding:100px 0 0 0; text-align:center; background:url(../img/mv_bg.webp) no-repeat left 50% bottom 0 / cover;}

section#sc_mv > div#mv_box > div {position:relative; margin:0 auto; padding:40px 0 0 0; text-align:center; max-width:1240px;}
section#sc_mv > div#mv_box > div::after {content:""; display:block; margin:0 auto; padding-top:calc(32.7% * 0.69); width:69%; height:0; background:url(../img/mv_01.webp) no-repeat left 50% top 0 / contain;}

section#sc_mv > div#mv_box > div h1 {position:relative; margin:0 auto; padding:0 0; max-width:700px; font-size:54px; line-height:1.4; text-align:center;}
section#sc_mv > div#mv_box > div h1 span {position:relative; display:inline-block;}
section#sc_mv > div#mv_box > div h1 span:nth-of-type(1) {font-size:90%;}
section#sc_mv > div#mv_box > div h1 span::after {content:""; display:block; position:absolute; left:-2%; bottom:10px; width:104%; height:16px; background:#ffaf50; mix-blend-mode:multiply;}
section#sc_mv > div#mv_box > div h1 span:nth-of-type(2)::after {width:100%;}
section#sc_mv > div#mv_box > div p {position:relative; margin:20px auto; padding:0 0; font-size:20px; line-height:1.6; font-weight:600; color:#222; text-align:center;}

section#sc_mv > ul#mv_prob {position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:start; gap:20px 20px; margin:40px auto 20px auto; padding:0 0; max-width:1140px; background:#fff;}
section#sc_mv > ul#mv_prob li {width:calc((100% - 60px) / 4); margin:0 0; padding:0 0; text-align:center;}
section#sc_mv > ul#mv_prob li p:nth-of-type(1) {position:relative; display:inline-block; margin:0 auto; font-size:16px; line-height:1.5; font-weight:600; text-align:left;}
section#sc_mv > ul#mv_prob li p:nth-of-type(1)::after {content:""; display:block; margin:30px auto 20px auto; width:130px; height:130px;}
section#sc_mv > ul#mv_prob li:nth-of-type(1) p:nth-of-type(1)::after {background:url(../img/person_01.png) no-repeat left 50% top 50% / contain;}
section#sc_mv > ul#mv_prob li:nth-of-type(2) p:nth-of-type(1)::after {background:url(../img/person_02.png) no-repeat left 50% top 50% / contain;}
section#sc_mv > ul#mv_prob li:nth-of-type(3) p:nth-of-type(1)::after {background:url(../img/person_03.png) no-repeat left 50% top 50% / contain;}
section#sc_mv > ul#mv_prob li:nth-of-type(4) p:nth-of-type(1)::after {background:url(../img/person_04.png) no-repeat left 50% top 50% / contain;}
section#sc_mv > ul#mv_prob li p:nth-of-type(1) span {position:relative; display:block; margin:0 auto; padding:15px 20px; background:#f5f5f5; border-radius:20px;}
section#sc_mv > ul#mv_prob li p:nth-of-type(1) span::after {content:""; display:block; position:absolute; left:calc(50% - 10px); bottom:-15px; width:20px; height:20px; background:#f5f5f5; clip-path: polygon(0 0, 100% 0, 50% 100%);}
section#sc_mv > ul#mv_prob li p:nth-of-type(2) {margin:0 auto 10px auto; padding:0 0 0 55px; font-size:18px; line-height:1.5; font-weight:600; text-align:left; color:#f26e6e; background:url(../img/icon_01_p.png) no-repeat left 0 top 50% / 43px auto;}
section#sc_mv > ul#mv_prob li p:nth-of-type(2) span {display:block;}
section#sc_mv > ul#mv_prob li p:nth-of-type(3) {margin:0 30px; padding:0 0;}
section#sc_mv > ul#mv_prob li p:nth-of-type(3) a {display:block; margin:0 auto; padding:0 0; transition:all 0.3s ease-in-out;}
section#sc_mv > ul#mv_prob li p:nth-of-type(3) a:hover {opacity:0.7;}
section#sc_mv > ul#mv_prob li p:nth-of-type(3) a::after {content:""; display:block; margin:10px auto 0 auto; width:20px; height:20px; background:url(../img/icon_02.png) no-repeat left 50% top 50% / contain;}
section#sc_mv > ul#mv_prob li p:nth-of-type(3) a span {display:block; padding:5px 10px; font-size:20px; line-height:1.8; font-weight:600; text-align:center; color:#fff; background:#0f6db5; border-radius:50px;}



section[id^="sc_0"] {position:relative; z-index:10; margin:0 auto !important; padding:0 0;}
section[id^="sc_"] > div {margin:0 auto; padding:100px 0 100px 0; text-align:center; max-width:1240px;}
section[id^="sc_"] > div > h2 {position:relative; display:inline-block; margin:0 auto 20px auto; padding:0 0; font-size:34px !important; line-height:1.4; color:#222;}
section[id^="sc_"] > div > h2::after {content:""; display:block; margin:15px auto 0 auto; width:50px; height:6px; background:#319FDB; border-radius:10px;}
section[id^="sc_"] > div > h2 span.sub_txt {font-size:70%;}
section[id^="sc_"] > div > h2 strong {color:#027BCF;}
section[id^="sc_"] > div > h2 + p {margin:25px auto 0 auto; font-size:16px; line-height:1.6 !important; font-weight:600; max-width:1000px;}


p.cta_btn {margin:0 auto; padding:0 0;}
p.cta_btn a {display:inline-block; padding:15px 40px; font-size:22px; line-height:1.6; text-align:center; font-weight:600; letter-spacing:1px; color:#03335F; background:linear-gradient(90deg, #F4ED54, #EADC3D); border-radius:50px;}
p.cta_btn a:hover {filter:brightness(0.9);}
p.cta_btn a span {display:inline-block;}
p.cta_btn a span:nth-last-of-type(1) {position:relative; padding:0 25px 0 0;}
p.cta_btn a span:nth-last-of-type(1)::after {content:""; display:inline-block; position:absolute; right:0; top:50%; transform:translate(0, -60%); -webkit-transform:translate(0%, -60%); -ms-transform:translate(0, -60%); width:18px; height:18px; background:url(../img/icon_01_b.png) no-repeat 50% 50% / contain;}
p.cta_btn a:hover span:nth-last-of-type(1)::after {background:url(../img/icon_01_b.png) no-repeat 50% 50% / contain;}
p.cta_btn + p {margin:0 auto; font-size:16px !important; font-weight:400 !important;}


section#sc_01 {background:#f5f5f5;}
section#sc_01 > div > h2 {margin:0 auto 20px auto; font-size:40px !important; line-height:1.6;}
section#sc_01 > div > h2::after {width:70%; height:4px; background:#0F6DB5;}
section#sc_01 > div > h2 span {display:block;}
section#sc_01 > div > h2 span:nth-of-type(1) {font-size:75%;}

section#sc_01 > div > h2 + p {margin:20px auto 0 auto; font-size:18px;}

section#sc_01 > div > div > ul {margin:60px auto 0 auto; padding:0 0; max-width:1160px;}
section#sc_01 > div > div > ul > li {position:relative; margin:0 auto 80px auto; border-radius:30px; overflow:hidden;}
section#sc_01 > div > div > ul > li:nth-last-of-type(1) {margin-bottom:0;}
section#sc_01 > div > div > ul > li > span[id^="prb_0"] {display:inline; position:absolute; left:0; top:-100px; opacity:0;}
section#sc_01 > div > div > ul > li dl.prob {margin:0 auto; padding:0 0; background:#fff;}
section#sc_01 > div > div > ul > li dl.prob dt {position:relative; display:flex; justify-content:center; align-items:center; padding:30px 10px; font-size:30px; line-height:1.4; font-weight:600; color:#fff; background:linear-gradient(90deg, #ff9393, #f86868);}
section#sc_01 > div > div > ul > li dl.prob dt::before {content:""; display:inline-block; margin:0 10px 0 0; width:45px; height:40px; background:url(../img/icon_01_w.png) no-repeat left 50% top 50% / 43px auto;}
section#sc_01 > div > div > ul > li dl.prob dd {position:relative; display:inline-block; max-width:840px; margin:0 auto; padding:40px 0 40px 150px; text-align:left;}
section#sc_01 > div > div > ul > li dl.prob dd::before {content:""; display:block; position:absolute; left:0; top:40px; margin:0 0; width:130px; height:130px;}
section#sc_01 > div > div > ul > li:nth-of-type(1) dl.prob dd::before {background:url(../img/person_01.png) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(2) dl.prob dd::before {background:url(../img/person_02.png) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(3) dl.prob dd::before {background:url(../img/person_03.png) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(4) dl.prob dd::before {background:url(../img/person_04.png) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(1) {position:relative; display:inline-block; padding:20px 50px; font-size:22px; line-height:1.6; font-weight:600; text-align:left; color:#f26e6e;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(1)::before {content:""; display:block; position:absolute; left:0; top:0; margin:0 0; width:40px; height:35px; background:url(../img/icon_03_a.png) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(1)::after {content:""; display:block; position:absolute; right:0; bottom:0; margin:0 0; width:40px; height:35px; background:url(../img/icon_03_b.png) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(2) {padding:0 0 0 50px; font-size:16px; text-align:left;}
section#sc_01 > div > div > ul > li dl.prob dd p span {display:block;}

section#sc_01 > div > div > ul > li dl.soln {position:relative; margin:0 auto; padding:40px 0; background:#f5f5f5;}
section#sc_01 > div > div > ul > li:nth-of-type(1) dl.soln {background:#e2f4ff;}
section#sc_01 > div > div > ul > li:nth-of-type(2) dl.soln {background:#ecedfa;}
section#sc_01 > div > div > ul > li:nth-of-type(3) dl.soln {background:#d8fdf6;}
section#sc_01 > div > div > ul > li:nth-of-type(4) dl.soln {background:#e7e8e8;}
section#sc_01 > div > div > ul > li dl.soln::after {content:""; display:block; position:absolute; right:30px; bottom:0; width:210px; height:0; padding-top:calc(210px * 1.08); background:url(../img/person_00.png) no-repeat left 50% bottom 0 / contain;}
section#sc_01 > div > div > ul > li dl.soln dt {position:relative; max-width:920px; min-height:100px; margin:0 auto; padding:10px 0 0 160px; font-size:14px; line-height:1.6; font-weight:600; text-align:left;}
section#sc_01 > div > div > ul > li dl.soln dt::before {content:""; display:block; position:absolute; left:0; top:0; width:140px; height:100px;}
section#sc_01 > div > div > ul > li:nth-of-type(1) dl.soln dt::before {background:url(../img/sc_01_icon_01.png) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(2) dl.soln dt::before {background:url(../img/sc_01_icon_02.png) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(3) dl.soln dt::before {background:url(../img/sc_01_icon_03.png) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(4) dl.soln dt::before {background:url(../img/sc_01_icon_04.png) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li dl.soln dt span {display:block;}
section#sc_01 > div > div > ul > li dl.soln dt span:nth-of-type(1) {position:relative;}
section#sc_01 > div > div > ul > li dl.soln dt span:nth-of-type(1)::before {content:"ー"; display:inline-block; margin:0 5px 0 0;}
section#sc_01 > div > div > ul > li dl.soln dt span:nth-of-type(1)::after {content:"ー"; display:inline-block; margin:0 0 0 5px;}
section#sc_01 > div > div > ul > li dl.soln dt span:nth-of-type(2) {position:relative; margin:5px 0 0 0; font-size:0; line-height:0;}
section#sc_01 > div > div > ul > li dl.soln dt span:nth-of-type(2)::before {content:""; display:block; position:absolute; left:0; top:0;}
section#sc_01 > div > div > ul > li:nth-of-type(1) dl.soln dt span:nth-of-type(2)::before {width:170px; height:55px; background:url(../img/logo_esm.svg) no-repeat left 0 top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(2) dl.soln dt span:nth-of-type(2)::before {width:330px; height:55px; background:url(../img/logo_appli.svg) no-repeat left 0 top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(3) dl.soln dt span:nth-of-type(2)::before {width:480px; height:55px; background:url(../img/logo_marketing.svg) no-repeat left 0 top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(4) dl.soln dt span:nth-of-type(2)::before {width:315px; height:55px; background:url(../img/logo_flow.svg) no-repeat left 0 top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(1) dl.soln dt span:nth-of-type(2) {padding-left:185px; font-size:14px; line-height:55px; color:#1c4476;}
section#sc_01 > div > div > ul > li dl.soln dd {position:relative; max-width:920px; margin:15px auto 0 auto; padding:0 0;}
section#sc_01 > div > div > ul > li dl.soln dd::before {content:""; display:block; position:absolute; left:0; top:10px; margin:0 0; width:180px; height:140px;}
section#sc_01 > div > div > ul > li:nth-of-type(1) dl.soln dd::before {background:url(../img/sc_01_01.webp) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(2) dl.soln dd::before {background:url(../img/sc_01_02.webp) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(3) dl.soln dd::before {background:url(../img/sc_01_03.webp) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li:nth-of-type(4) dl.soln dd::before {background:url(../img/sc_01_04.webp) no-repeat left 50% top 50% / contain;}
section#sc_01 > div > div > ul > li dl.soln dd p:nth-of-type(1) {position:relative; margin:5px 0 0 200px; padding:0 0; font-size:22px; line-height:1.6; font-weight:600; text-align:left;}
section#sc_01 > div > div > ul > li dl.soln dd p:nth-of-type(2) {margin:10px 0 0 200px; padding:0 0; font-size:16px; line-height:1.6; text-align:left;}
section#sc_01 > div > div > ul > li dl.soln dd p span {display:block;}
section#sc_01 > div > div > ul > li dl.soln dd ul {display:flex; flex-wrap:wrap; justify-content:center; gap:20px 20px; margin:30px auto 0 auto; padding:0 0; max-width:560px;}
section#sc_01 > div > div > ul > li dl.soln dd ul li {position:relative; width:calc((100% - 20px) / 2); margin:0 0; padding:0 0;}
section#sc_01 > div > div > ul > li dl.soln dd ul li a {display:block; padding:15px 15px; font-size:18px; line-height:1.8; font-weight:600; color:#fff; background:#666; border-radius:50px;}
section#sc_01 > div > div > ul > li dl.soln dd ul li:nth-of-type(1) a {background:#17B9D4;}
section#sc_01 > div > div > ul > li dl.soln dd ul li:nth-of-type(2) a {background:#FF9301;}
section#sc_01 > div > div > ul > li dl.soln dd ul li > span {display:block; position:absolute; left:0; top:-20px; width:100%; font-size:12px; line-height:20px; text-align:center;}
section#sc_01 > div > div > ul > li dl.soln dd ul li > span::before {content:"＼"; display:inline; padding:0 2px 0 0; font-size:85%;}
section#sc_01 > div > div > ul > li dl.soln dd ul li > span::after {content:"／"; display:inline; padding:0 0 0 2px; font-size:85%;}


section#sc_02 {background:#17b9d4;}
section#sc_02 > div > h2 {margin:0 auto 20px auto; font-size:30px !important; color:#fff;}
section#sc_02 > div > h2 span:nth-of-type(1) {margin-right:5px; color:#EDE25D;}
section#sc_02 > div > h2::after {margin:5px 0 0 -5%; width:110%; height:2px; background:#fff; border-radius:0:}
section#sc_02 > div > div {margin:20px auto 0 auto; max-width:680px;}
section#sc_02 div.satori__custom_form > div:nth-of-type(1) label:nth-of-type(n+2) {padding:5px 10px;}

#footer {position:relative; z-index:10; padding:30px 0; text-align:center; background:#E2F4FF;}
#footer p a {position:relative; margin:0 auto; min-width:250px; font-size:0;}
#footer p a::before {content:""; display:block; margin:0 0; width:100%; height:45px; background:url(../img/logo_sb_b.png) no-repeat 50% 50% / contain;}
#footer p a:hover {opacity:0.7;}
#footer small {display:inline-block; margin:0 auto;}




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

section#hdr {height:50px; padding:0 10px 0 20px !important;}
#logo {height:34px;}
#logo a {height:34px;}
ul.cta {gap:0 10px;}
ul.cta li a {min-width:0;}

#nav_and_cta ul.cta li a {padding:8px 20px; font-size:16px; line-height:18px; letter-spacing:1px;}
#nav_and_cta ul.cta li a span {padding:0 0;}
#nav_and_cta ul.cta li a span::after {content:none;}


section[id^="sc_"] > div {padding:50px 4% !important;}
section[id^="sc_"] > div > h2 {font-size:28px !important; margin:0 auto 10px auto;}
section[id^="sc_"] > div > h2 + p {margin:20px auto 0 auto;}


p.cta_btn {margin:0 auto;}
p.cta_btn a {padding:10px 10px; width:80%; font-size:20px;}
p.cta_btn a span:nth-last-of-type(1) {padding:0 22px 0 0;}
p.cta_btn a span:nth-last-of-type(1)::after {width:18px; height:18px;}
p.cta_btn + p {font-size:14px !important;}


section#sc_mv {margin:0 auto; padding:50px 0 0 0 !important;}
section#sc_mv > div#mv_box {padding:40px 4% 0 4% !important;}
section#sc_mv::after {width:60px; height:30px;}
section#sc_mv > div#mv_box > div {margin:0 0; padding:0 0;}
section#sc_mv > div#mv_box > div::after {padding-top:calc(32.7% * 1); width:100%;}

section#sc_mv > div#mv_box > div h1 {display:inline-block; font-size:32px;}
section#sc_mv > div#mv_box > div h1::after {content:""; display:block; position:absolute; left:-1.5%; bottom:4px; width:100%; height:12px; background:#ffaf50; mix-blend-mode:multiply;}
section#sc_mv > div#mv_box > div h1 span:nth-of-type(2) {padding-left:10px;}
section#sc_mv > div#mv_box > div h1 span::after {content:none;}
section#sc_mv > div#mv_box > div p {font-size:18px;}


section#sc_mv > ul#mv_prob {margin:40px 4% 20px 4%;}
section#sc_mv > ul#mv_prob li {width:calc((100% - 20px) / 2);}
section#sc_mv > ul#mv_prob li p:nth-of-type(1) {margin:0 0;}
section#sc_mv > ul#mv_prob li p:nth-of-type(1)::after {margin:20px auto 10px auto; width:110px; height:110px;}
section#sc_mv > ul#mv_prob li p:nth-of-type(2) {display:inline-block;}
section#sc_mv > ul#mv_prob li p:nth-of-type(3) a span {font-size:18px;}


section#sc_01 > div > h2 {font-size:28px !important;}
section#sc_01 > div > div > ul {margin:20px auto 0 auto;}
section#sc_01 > div > div > ul > li {margin:0 auto 40px auto; border-radius:20px;}
section#sc_01 > div > div > ul > li dl.prob dt {padding:15px 10px; font-size:24px;}
section#sc_01 > div > div > ul > li dl.prob dt::before {width:35px; height:30px; background-size:contain;}

section#sc_01 > div > div > ul > li dl.prob dd {margin:0 20px; padding:20px 0 20px 110px;}
section#sc_01 > div > div > ul > li dl.prob dd::before {top:20px; width:100px; height:100px;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(1) {padding:10px 30px; font-size:18px; line-height:1.5;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(2) {padding:0 0 0 30px; font-size:14px; line-height:1.5;}

section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(1)::before {width:25px; height:20px;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(1)::after {width:25px; height:20px;}

section#sc_01 > div > div > ul > li dl.soln {padding:20px 20px;}
section#sc_01 > div > div > ul > li dl.soln::after {right:15px; bottom:-40px; width:140px; padding-top:calc(140px * 1.08);}

section#sc_01 > div > div > ul > li dl.soln dt {display:inline-block; min-height:80px; padding:5px 0 0 120px;}
section#sc_01 > div > div > ul > li:nth-of-type(1) dl.soln dt {width:calc(120px + 290px);}
section#sc_01 > div > div > ul > li:nth-of-type(2) dl.soln dt {width:calc(120px + 240px);}
section#sc_01 > div > div > ul > li:nth-of-type(3) dl.soln dt {width:calc(120px + 350px);}
section#sc_01 > div > div > ul > li:nth-of-type(4) dl.soln dt {width:calc(120px + 230px);}
section#sc_01 > div > div > ul > li dl.soln dt::before {width:100px; height:80px;}
section#sc_01 > div > div > ul > li:nth-of-type(1) dl.soln dt span:nth-of-type(2)::before {width:120px; height:40px;}
section#sc_01 > div > div > ul > li:nth-of-type(2) dl.soln dt span:nth-of-type(2)::before {width:240px; height:40px;}
section#sc_01 > div > div > ul > li:nth-of-type(3) dl.soln dt span:nth-of-type(2)::before {width:350px; height:40px;}
section#sc_01 > div > div > ul > li:nth-of-type(4) dl.soln dt span:nth-of-type(2)::before {width:230px; height:40px;}
section#sc_01 > div > div > ul > li:nth-of-type(1) dl.soln dt span:nth-of-type(2) {padding-left:135px; line-height:40px;}

section#sc_01 > div > div > ul > li dl.soln dd {margin:20px auto 0 auto;}
section#sc_01 > div > div > ul > li dl.soln dd::before {top:5px; width:150px; height:120px;}

section#sc_01 > div > div > ul > li dl.soln dd p:nth-of-type(1) {margin:5px 0 0 170px; font-size:18px; line-height:1.5;}
section#sc_01 > div > div > ul > li dl.soln dd p:nth-of-type(2) {margin:10px 0 0 170px; font-size:14px; line-height:1.5;}

section#sc_01 > div > div > ul > li dl.soln dd ul {margin:20px 0 0 0; max-width:calc(100% - 150px);}
section#sc_01 > div > div > ul > li dl.soln dd ul li a {padding:15px 10px; font-size:16px; line-height:1.6;}
section#sc_01 > div > div > ul > li dl.soln dd ul li > span {top:-16px; font-size:11px; line-height:16px;}

section#sc_02 > div > h2 {font-size:28px !important;}

#page-top {background:#f4f4f4;}


#footer {padding:20px 0 20px 0;}
#footer p a {margin:0 auto 10px auto; min-width:240px;}
#footer p a::before {height:40px;}
#footer small {margin:10px auto 0 auto;}

}



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

#logo {height:34px;}
#logo a {height:34px;}

section[id^="sc_"] > div > h2 {max-width:calc(100% - 10px); font-size:18px !important;}
section[id^="sc_"] > div > h2::after {margin:10px 0 0 -5px; width:calc(100% + 10px); height:2px;}
section[id^="sc_"] > div > h2 + p {font-size:16px; text-align:left;}
section[id^="sc_"] > div > h2 + p span {display:inline;}

p.cta_btn a {padding:10px 10px; width:92%; font-size:18px; line-height:1.5;}
p.cta_btn a span:nth-last-of-type(1) {padding:0 20px 0 0;}
p.cta_btn a span:nth-last-of-type(1)::after {width:16px; height:16px;}
p.cta_btn + p {font-size:12px !important;}

section#sc_mv > div#mv_box {padding:20px 4% 0 4% !important;}

section#sc_mv > div#mv_box > div h1 {font-size:28px; line-height:1.6; transform:translate(2%, 0); -webkit-transform:translate(2%, 0); -ms-transform:translate(2%, 0);}
section#sc_mv > div#mv_box > div h1::after {content:none;}
section#sc_mv > div#mv_box > div h1 span:nth-of-type(2) {padding-left:0;}
section#sc_mv > div#mv_box > div h1 span::after {content:""; display:block; position:absolute; left:-2%; bottom:6px; width:104%; height:10px; background:#ffaf50; mix-blend-mode:multiply;}
section#sc_mv > div#mv_box > div h1 span:nth-of-type(2)::after {width:100%;}
section#sc_mv > div#mv_box > div p {font-size:18px; line-height:1.5;}

section#sc_mv > ul#mv_prob li {width:100%; padding:0 0 20px 0; border-bottom:1px dotted #ccc;}
section#sc_mv > ul#mv_prob li:nth-last-of-type(1) {padding:0 0; border-bottom:none;}
section#sc_mv > ul#mv_prob li p:nth-of-type(1) {font-size:14px;}
section#sc_mv > ul#mv_prob li p:nth-of-type(1)::after {width:90px; height:90px;}
section#sc_mv > ul#mv_prob li p:nth-of-type(1) span {padding:15px 15px; border-radius:50px;}
section#sc_mv > ul#mv_prob li p:nth-of-type(1) span br {display:none;}
section#sc_mv > ul#mv_prob li p:nth-of-type(2) {padding:0 0 0 35px; font-size:16px; background-size:auto 24px;}
section#sc_mv > ul#mv_prob li p:nth-of-type(2) span {display:inline;}

section#sc_01 > div > h2 {font-size: 24px !important;}
section#sc_01 > div > h2::after {width:80%; margin:0 auto;}
section#sc_01 > div > h2 + p {font-size:16px; text-align:center;}
section#sc_01 > div > h2 + p span {display:inline-block;}
section#sc_01 > div > div > ul > li dl.prob dt {padding:15px 5px; font-size:16px; text-align:left;}
section#sc_01 > div > div > ul > li dl.prob dt::before {width:25px; height:20px; margin:0 5px 0 0;}

section#sc_01 > div > div > ul > li dl.prob dd {margin:0 10px; padding:20px 0;}
section#sc_01 > div > div > ul > li dl.prob dd::before {position:relative; left:auto; top:auto; margin:0 auto 5px auto; width:90px; height:90px;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(1) {padding:5px 20px 5px 25px; font-size:16px;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(1)::before {width:20px; height:15px;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(1)::after {width:20px; height:15px;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(1) span {display:inline;}
section#sc_01 > div > div > ul > li dl.prob dd p:nth-of-type(2) {padding:10px 10px 0 10px;}

section#sc_01 > div > div > ul > li dl.soln::after {right:10px; bottom:-10px; width:120px; padding-top:calc(120px * 1.08);}

section#sc_01 > div > div > ul > li dl.soln dt {min-height:55px; padding:0 0 0 80px; font-size:12px;}
section#sc_01 > div > div > ul > li dl.soln dt::before {width:70px; height:55px;}
section#sc_01 > div > div > ul > li:nth-of-type(1) dl.soln dt {width:100%;}
section#sc_01 > div > div > ul > li:nth-of-type(2) dl.soln dt {width:100%;}
section#sc_01 > div > div > ul > li:nth-of-type(3) dl.soln dt {width:100%;}
section#sc_01 > div > div > ul > li:nth-of-type(4) dl.soln dt {width:100%;}

section#sc_01 > div > div > ul > li dl.soln dt span:nth-of-type(1)::before {content:none;}
section#sc_01 > div > div > ul > li dl.soln dt span:nth-of-type(1)::after {content:none;}

section#sc_01 > div > div > ul > li:nth-of-type(1) dl.soln dt span:nth-of-type(2)::before {width:100%; height:30px;}
section#sc_01 > div > div > ul > li:nth-of-type(2) dl.soln dt span:nth-of-type(2)::before {width:100%; height:30px;}
section#sc_01 > div > div > ul > li:nth-of-type(3) dl.soln dt span:nth-of-type(2)::before {width:100%; height:30px;}
section#sc_01 > div > div > ul > li:nth-of-type(4) dl.soln dt span:nth-of-type(2)::before {width:100%; height:30px;}
section#sc_01 > div > div > ul > li:nth-of-type(1) dl.soln dt span:nth-of-type(2) {padding-left:0; font-size:0; line-height:0;}


section#sc_01 > div > div > ul > li dl.soln dd::before {content:none;}

section#sc_01 > div > div > ul > li dl.soln dd p:nth-of-type(1) {margin:5px 0 0 0; font-size:16px;}
section#sc_01 > div > div > ul > li dl.soln dd p:nth-of-type(2) {margin:10px 0 0 0;}
section#sc_01 > div > div > ul > li dl.soln dd ul {gap:10px 10px; margin:10px 0 0 0; max-width:calc(100% - 120px);}
section#sc_01 > div > div > ul > li dl.soln dd ul li {width:100%;}
section#sc_01 > div > div > ul > li dl.soln dd ul li a {padding:10px 10px; font-size:14px; line-height:1.6;}
section#sc_01 > div > div > ul > li dl.soln dd ul li a span {padding:0 35px 0 0;}
section#sc_01 > div > div > ul > li dl.soln dd ul li a span::after {width:30px; height:30px; transform:translate(0, -50%); -webkit-transform:translate(0%, -50%); -ms-transform:translate(0, -50%);}
section#sc_01 > div > div > ul > li dl.soln dd ul li > span {display:none;}

section#sc_02 > div > h2 {font-size:24px !important;}
section#sc_02 > div > h2 span {display:block;}
section#sc_02 > div > h2 span:nth-of-type(1) {margin-right:0;}


#footer {padding:20px 0 20px 0;}
#footer p a {margin:0 auto 10px auto; min-width:240px;}
#footer p a::before {height:40px;}
#footer small {margin:10px auto 0 auto;}

}


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

section[id^="sc_"] > div > h2 + p {font-size:14px;}



}