@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: 420px) {
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;}

@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;}
#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: 420px) {
header {padding:0 10px;}
header div#hdr-wrap {gap:0 20px;}
header #logo {flex-basis:170px;}
}

@media only screen and (max-width: 330px) {
header div#hdr-wrap {gap:0 10px;}
header #logo {flex-basis:150px;}
}

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 {margin:50px 0 0 0;}
#esm_lineup div {}
#esm_lineup div > h2 {color:#fff; background:#0f6db5;}
#esm_lineup div > p {}

#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) {
#logo {height:34px;}
#logo a {height:34px;}
#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;}
#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;}
}