body {font-family: "noto-sans-cjk-jp", sans-serif;}
html,body {
  overflow-x: hidden;margin: 0;padding: 0;
}
a {text-decoration: none; color: inherit;}

.content{scroll-margin-top: 80px;}
.contentbox {
  width: 1080px;
  max-width: 100%;
  margin: 0 auto;
}
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 1000;
}
#headcontent {
  display: flex;
  align-items: center;
  height: 86px;
    z-index: 200;
}
#headcontent img{ height:40px; margin-top: 5px;}
#logo { margin-right: 10px; }
.catchcopy { 
    line-height: 1.2; 
    letter-spacing: 0.1em;
    font-size:0.8em; 
    color:#007EE1; 
}
.links { 
    display: flex; 
    gap: 10px; 
    font-size:1.125em;
    font-weight: bold;
    color:#595757; 
    margin-left: 1em; 
}
.links a{margin: 0 0.5em;}
#contact-btn { 
  background-color: #F56AB1; 
  color: #fff; 
  font-size:1.125em;
  font-weight: bold;
  border: none;
  border-radius: 7px; 
  padding: 0.3em 1.75em; 
  cursor: pointer;
  text-decoration: none; 
display: inline-block;
}
.toiawase-btn { margin-left: auto; }

/* SECTION 1 */
#section1{
    margin-top: 90px;  
    background: linear-gradient(to bottom, #fff, #E6F4FF);
    display: flex;
}
.section1-catchcopy{
    color: #9CB2C0; 
    font-weight:bold; 
    font-size:1.5em; 
    line-height: 2.3em;
    text-align: center;
}
.section1-catchcopy .highlight {
  font-size: 1.1em;
  background-color: #007EE1;
  color: #fff;
  border-radius: 10px;
  padding: 2px 10px ;
  margin: 0 0.2em;
}
.section1-inner { display: flex; padding: 40px 0 50px 0; justify-content: center; }
.section1-left, .section1-right { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}
.section1-left img{width: 580px; margin-top:2em;}
.company-name {font-size: 0.75em; color:#595757; margin:1em 0 2em 0 ; }
.apply-btn {
  color: #F56AB1;
  background-color: #fff; 
  border: 4px solid #F56AB1; 
  border-radius: 30px; 
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); 
  font-size: 1.3em; 
  font-weight: bold; 
  padding: 0.4em 1.5em; 
  text-decoration: none; 
  display: inline-block; 
  align-self: center; 
  cursor: pointer; 
  transition: box-shadow 0.2s; 
}
.illustration{width: 372px}

/* SECTION 2 */
.section2-catchcopy{
    color:#fff; 
    font-size:1.3em; 
    margin-top: 2.4em; 
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.section2-boxes { display: flex; gap: 15px; margin: 2em 0;}
.section2-boxes .box { flex: 1; }
.box{
   background-color: #fff; 
   border: solid 6px #007EE1;
   border-radius: 15px; 
   padding: 0 1.75em 0.5em 1.75em;
}
.box h3{font-size: 1.4em; color: #007EE1; margin-bottom: 0;}
.section2-line { width: 100%; }
.background-overlay {
  position: relative;
  background: url('https://support.acs-l.jp/uptone/images/section2-haikei.png') no-repeat center center / cover;
  overflow: hidden; 
}
.section2-container{ display: flex; justify-content: center; gap: 30px; margin: 0.3em 0;}
.section2-images { display: flex; align-items: center; gap:10px;}
.section2-images img{ width: 96px; object-fit: cover;}
.section2-images .text{
    line-height: 1.4; 
    font-size: 1.5em; 
    font-weight: bold; 
    letter-spacing: 0.1em; 
    color: #FFADD7;
}
.section2-answer{display: flex; justify-content: center; margin-bottom: 1.5em;}
.section2-answer img{width: 230px;}
.section2-answer .text{
    font-size: 1.5em; 
    font-weight: bold; 
    letter-spacing: 0.1em; 
    color: #FFF;
}
.rubi{
    text-align: center; 
    color: #fff; 
    letter-spacing: 0.75em; 
    font-size: 0.8em; 
    line-height: 3em;
}


/* SECTION 3 */
#section3{background-color: #007EE1; color: #fff; padding-bottom:5em;}
.section-heading {padding: 3em 0 1em 0; display: flex; align-items: center; }
.section-line {margin-left: 1em; width: 50px; height: 2px; background: #333; }
.section3-line {margin-left: 1em; width: 50px; height: 2px; background: #fff; }
.section3-content {display: flex; gap: 40px; justify-content: center;}
.section3-left {width: 570px;order: 1;}
.section3-left p{margin: 0.6em 0;}
.section3-left h4{font-size:1.3em; color:#FFADD7; margin: 0;}
.section3-left img{width: 84px;}
.section3-right{display: flex; align-items: center;order: 2;}
.feature {display: flex; gap: 25px; align-items: center; margin: 38px 0;}

/* SECTION 4 */
#section4{background: linear-gradient(to bottom, #fff, #BEE2FF); display: flex;}
.section4-bara {text-align: center; padding-top: 5em;}
.section4-bara img{width: 596px;}
.section4-bara p{color: #888;}
.section4-title { display: flex; align-items: center; gap: 4px; }
.section4-title img{height: 65px;}
.section4-title p{font-size: 1.35em; color: #007EE1; font-weight: bold;}
.section4-line { flex: 1; height: 5px; background: #007EE1; margin: 0 10px;}
.sec4-bottom{display: flex; align-items: center; justify-content: center;}
.section4-circles { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 54px 0 80px 0;}
.circle { 
    position: relative; 
    text-align: center;
    width: 240px;
    height: 240px;
    border-radius: 50%;
}
.circle img { position: relative; top: -40px;  width: 212px; height: auto;}
.circle .text{color: #FFFFFF; font-weight: bold; font-size: 1.2em; position: relative; top: -36px;}
.triangle-right {
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}
.cl-1{background:linear-gradient(to right,#1D2A88,#751B79)}
.cl-2{background:linear-gradient(to right,#781B76,#BA1433)}
.cl-3{background:linear-gradient(to right,#BA1433,#EF8C03)}
.cl-a{border-left: 32px solid #751C7A;}
.cl-b{border-left: 32px solid #BB1632;}

/* SECTION 5 */
#section5{  background-image: url('https://support.acs-l.jp/uptone/images/haikei.png'); background-repeat: repeat; background-size:32px; padding-bottom: 5.5em;}
.box2{background-color: #FFFFFF;}
.section5-boxes { display: flex; align-items: center; gap: 5px; justify-content: center; margin-top: 2em;}
.plus { font-size: 3em; }
.icon-heading { margin-left: 10px; display: flex; align-items: center; gap: 5px;  margin-top: -2em;}
.icon-heading h4{color: #007EE1; font-size: 1.3em; margin: 0;}
.box2 ul{line-height: 2em; margin-top: 10px; margin-bottom: 1.5em; margin-right: 1em;}
.arrow{
  display: inline-block;
  width: 550px;
  height: 2px;
  background: #333;
  position: relative;
}
.arrow::after {
content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 40px;
    height: 40px;
    border-top: 2px solid #333;
    transform: translateY(-50%) rotate(45deg);
}
.container{display:flex ;align-items: center;flex-direction: column;}
.section5-copy{
    color: #FFFFFF; 
    background-color: #F56AB1; 
    padding: 0.5em 4.3em; 
    border-radius: 60px;
    font-weight: bold;
    font-size: 1.3em;
    margin: 1em 0 1.5em 0;
}
.moreinfo{position: relative; top: 0.5em; font-size: 0.95em; margin-top: 0.8em;}
.apply-btn2 {
  color: #F56AB1;
  background-color: #fff; 
  border: 4px solid #F56AB1; 
  border-radius: 12px; 
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); 
  font-size: 1.5em; 
  font-weight: bold; 
  padding: 0.6em 1.8em; 
  text-decoration: none; 
  display: inline-block; 
  cursor: pointer; 
  transition: box-shadow 0.2s; 
}

.arrow2{
  display: inline-block;
  width: 15em;
  height: 2px;
  background: #fff;
  position: relative;
}
.arrow2::after {
content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 40px;
    height: 40px;
    border-top: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}
.moreinfo2{position: relative; top: 0.5em; font-size: 1em; color: #fff; margin-right:1em;}
.pdfDL{text-align: center; margin-bottom: 4em;}

/* SECTION 6 */
#section6{background:#E6F4FF; display: flex;}
.section6-boxes { 
    width: 840px;
    border: solid 2px #000;
    border-radius: 20px;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: stretch;
  max-width: 960px;
  margin: 0 auto;
  position: relative; }
.box6 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  box-sizing: border-box;
  text-align: center;
flex-direction: column;
}
.section6-left{flex: 3; padding: 3em 0;}
.section6-right{flex: 2;}
.separator {
  width: 2px;
  margin: 2em 0;
  background: repeating-linear-gradient(
    to bottom,
    black 0 2px,
    transparent 4px 10px 
  );
}
.flow{width: 840px; margin: 3em auto; display:flex; justify-content: center;flex-direction: column; }
.flow-step { display: flex; gap: 5px; }
.index1{color: #FFFFFF; background-color: #007EE1; border-radius: 30px; border: solid 1px #000; padding:0.6em 1.8em;}
.index2{font-size: 0.8em;letter-spacing: 1em; margin: 1.5em 0 1em 0;;}
.index3 img{width: 215px;}
.index4{font-family: 'Numans', sans-serif; font-size: 3em; color: #007EE1; margin-top: 0.2em;}
.index5{color: #007EE1; text-align: left; display: inline-block; font-size: 0.9rem;}
.index6{font-size: 1.1em; font-weight: lighter;}
.mini{font-size: 0.7em;}
.index7{font-size: 1.1em; font-weight: bolder; color: #007EE1; margin: 0.2em 0;}
.index8{font-size: 1.2em;}
.number{font-size: 3em; margin-right:0.3em; z-index: 2;
background:#E6F4FF;font-weight: bolder; height: 76px;}
.flow-step{color: #007EE1;}
.flow-step h5{font-size: 2em; font-size: 1.2em; margin: 0.5em 0;}
.flow-step p{color: #000; margin: 0 0 2em 0; line-height: 1.7em;}
.flow_line{position: relative;}
.flow_line::after{
    content: "";
    position: absolute; top: 0;bottom: 0;right:100%;
    margin-right: -15px;width: 2px;
    background: #007EE1; pointer-events: none;
    margin-top: 15px;
    margin-bottom: 150px;
}
.apply-btn3 {
  color: #fff;
  background-color: #007EE1; 
  border: 4px solid #007EE1; 
  border-radius: 12px; 
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); 
  font-size: 1.5em; 
  font-weight: bold; 
  padding: 0.6em 1.8em; 
    align-self: center; 
  width: auto;
  text-decoration: none; 
  display: inline-block; 
  cursor: pointer; 
  transition: box-shadow 0.2s; 
}
.flow .text{line-height: 3em; color: #007EE1; text-decoration: underline; align-self: center; }


/* 問い合わせフォーム */
#toiawase{
    margin: 4em 0;
}
.ttl {
position: relative;
color: #fff;
font-size: 1.5em; 
font-weight: bold; 
text-align: center;
padding: 30px;
background-color:#F56AB1;
margin-bottom: 2.5em;
}
.ttl::after {
width: 0;
height: 0;
position: absolute;
top: 100%;
left: 50%;
margin: 0 0 0 -1.2em;
border: 1.2em solid transparent;
border-top-color:#F56AB1;
content: '';
}
.ttl .display_sp{line-height: 0;}

/* FOOTER */
.footer-links { float: left;  margin: 2em 0; font-size: 0.75em;  display: flex; gap: 1.5em;}
.top-button {
    float: right;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  background: #888;
  border-radius: 50%;
  text-decoration: none;
  font-size: 0.8em;
  color: #fff;
  position: relative;
  top: -2em; 
}
.top-button::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 18px solid #fff;
  margin-bottom: 3px;
}
.top-button::after {
  content: "TOP";
  color: #fff;
  font-weight: bold;
  font-size: 0.8em;
}
.copyright{font-size: 0.8em; font-weight: lighter;}
#top {padding-top: 86px; margin-top: -86px;}

.br{display: none;}
.display_sp{display: none;}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    
    html {font-size: 90%;}
    .contentbox { width: 90%; }
    .display_pc{display: none; }
    .display_sp{display:inherit;}
    
    .section-heading{font-size:0.85em;}
    #headcontent {height: 65px;}
    #headcontent img {height: 25px;}
    .hamburger {
  position: fixed;
  right: 10px;
  z-index: 100;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
}
    .hamburger__line {
  position: absolute;
  left: 11px;
  width: 26px;
  height: 2px;
  background-color: #333;
  transition: all .4s;
}

.hamburger__line:nth-of-type(1) {
  top: 14px;
}
.hamburger__line:nth-of-type(2) {
  top: 23px;
}
.hamburger__line:nth-of-type(3) {
  top: 32px;
}

/* メニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger.active .hamburger__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger.active .hamburger__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}
    
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 30em;
  background-color: #fff;
  transform: translateY(-100%);
  transition: transform .4s;
  z-index: 50;
    display: flex;
    justify-content: center; 
    align-items: center; 
}
.nav.active {
  transform: translateY(0);
}
    .nav__list{ list-style: none;padding-left: 0; text-align: center;padding-top: 3em;}
    .nav__item{color: #595757; font-size: 1.2em;padding: 0.5em 0;}
    .nav__line{border: solid 1px #CECECE; margin: 1em 0;}
    .small{font-size: 1em; padding: 1em;}

    #contact-btn {margin-right: 45px; padding: 0.3em 1.25em; font-size: 1em;}
    
    #section1 { margin-top: 60px;}
    .br{display:inherit; margin: -1.2em 0;}
    .section1-inner{flex-direction: column;}
    .section1-left img {width: 90%;}
    .illustration {width: 70%; margin-bottom: 18px;}
    
    .br2{margin: -0.5em 0;}
    .section2-boxes{flex-direction: column;width: 23em; margin: 2em auto;}
    .section2-answer {flex-direction: column;align-items: center;}
    .section2-answer .text {margin-top: 0.8em;}
    .section2-line {width: 90%;display: block; margin: 0 auto 20px auto;}
    .section2-container {
        flex-direction: column;gap: 0px;
        margin: 0.3em auto;
        width: fit-content; max-width: 100%;}
    .section2-images .text {font-size: 1.3em;}
    .section2-images img {width: 80px;}
    .background-overlay {background: url('https://support.acs-l.jp/uptone/images/section2-haikei_sp.png') no-repeat center center / cover;}
    
    .section3-content {flex-direction: column;}
    .section3-left {width: 100%;order: 2;}
    .section3-right {width: 100%;order: 1; justify-content: center;}
    .slider .slick-list{overflow: visible;}
    .feature {margin: -24px 0 0 0;}
    .slide{height: auto; margin-right: 10px; margin-left: 10px;}
    .section3-left img {margin-bottom: 1em; width: 70px;}
    .section3-left h4{font-size: 1.5em;}
    .slick-prev {left: 0;z-index: 1;}
    .slick-next {right: 0;z-index: 1;}
    .slick-prev,.slick-next{width: 50px;height: 50px;}
    .slick-prev:before, .slick-next:before {font-size: 50px;}
    .slick-dots li button:before{
	font-size:12px!important; color: #fff!important;}
    
    .section4-bara img {width: 90%; margin: 0 auto;}
    .section4-title img {height: 55px;}
    .section4-title {display: flex;flex-direction: column; align-items: center;gap:0px; margin: 3em 0;}
    .sec4-bottom p{margin: 0; font-size: 1.5em; line-height: 1.3em;}
    .sec4-t3 img{width:5em;}
    .section4-line {flex: none; width: 100%; margin: 10px auto;}
    .section4-circles {flex-direction: column; gap:4em; padding-top: 1.5em;}
    .cl-1{background:linear-gradient(#1D2A88,#751B79)}
    .cl-2{background:linear-gradient(#781B76,#BA1433)}
    .cl-3{background:linear-gradient(#BA1433,#EF8C03)}
    .circle {width: 220px; height: 220px;}
    .circle img{width: 200px;}
    
    .section5-boxes {flex-direction: column; gap:10px;}
    .section5-copy{padding: 1em; width: 90%; text-align: center;font-size: 1.2em;margin: 2em 0;}
    .section5-copy .display_sp{margin: -12px 0;} 
    .box2 {width: 111%; display: flex; justify-content: center;}
    .apply-btn2 .display_sp{margin: -15px;}
    .apply-btn2{text-align: center;font-size: 1.4em; padding: 0.5em 2em;}
    .arrow {width: 300px;}
    
    .section6-boxes {flex-direction: column; width: 100%;}
    .section6-boxes .display_sp{margin: -10px 0;}
    .section6-left {border-bottom: dotted 1px; margin: 0 25px;}
    .separator {display: none;}
    .flow {width: 100%;}
    .flow .display_sp{margin: -15px;}}
    .apply-btn3{font-size: 1.4em;line-height: 1.5em;width: 100%;}

    .footer-links {display: inline-block; margin: 1.5em 0;}
    .footer-links .display_sp{margin-top:-1em; }
    .copyright{margin: 0;}

}