.letro-editor-flow-2024 { background: #FFF; padding: 100px 20px;}
.letro-editor-flow-2024-inner { max-width:1200px; margin: 0 auto 60px auto;}
.letro-editor-flow-2024-inner h2 { font-size:2.8rem; text-align:center; margin-bottom:60px; letter-spacing:.05rem; }
.letro-editor-flow-2024-inner h2 strong { color:#FF864E; }
.letro-editor-flow-2024-inner .letro-editor-flow-2024-catch { text-align:center; font-size:2.2rem; color: #FF864E; }
.letro-editor-flow-2024-list { margin: 0 auto 40px auto; width: 690px; display:flex; align-items: center; justify-content: space-between; background: url(https://service.aainc.co.jp/hubfs/letroLP/letro_2024/page/img_letro-editor_arrowR-gradation.svg) no-repeat center center;}
.letro-editor-flow-2024-list li h3 { display: flex; align-items: center; justify-content: center; border-radius: 50vw; height: 100px; width: 100px; text-align: center; line-height: 1.3;}
.letro-editor-flow-2024-list li h3.create, .letro-editor-flow-2024-list li h3.analytics { border:2px solid #FF864E; background:#FFF; font-size:2.2rem; color:#FF864E; }
.letro-editor-flow-2024-list li h3.publish { border:5px solid #FFF; background: #FF864E; color: #FFF; font-size:3rem; width:130px; height:130px; }
.letro-editor-flow-2024-inner .letro-editor-flow-2024-video { max-width:800px; width:100%; position:relative; margin:0 auto; }
.letro-editor-flow-2024-inner .letro-editor-flow-2024-video img { width: 100%; z-index: 2;}
.letro-editor-flow-2024-inner .letro-editor-flow-2024-video .letro-editor-flow-video { position: absolute; z-index: 1; width: 618px; top: 27px; left: 50%; margin-left: -306px;}

.letro-editor-step-2024-inner { max-width:880px; margin: 0 auto; padding: 0; display:flex; gap:0 40px; align-items:center; }
.letro-editor-step-2024-inner h2 { width:240px; height:240px; color:#FFF; background: #FF864E; text-align:center; display:flex; flex-direction: column; align-items:center; justify-content:center; border-radius:50vw; line-height:1.2; font-size:3.0rem; position:relative; }
.letro-editor-step-2024-inner h2 small { font-size:1.8rem; margin-bottom: 20px;}
.letro-editor-step-2024-inner h2:after { background: url(https://service.aainc.co.jp/hubfs/letroLP/letro_2024/icon/icon_arrow_down_orange_solid.svg) no-repeat; background-size: cover; content: ""; height: 20px; position: absolute; width: 30px; top: 50%; right: -22px; margin-top: -10px; transform: rotate(270deg);}
.letro-editor-step-2024-inner .letro-editor-step-2024-inner-step { width:calc(100% - 280px); }
.letro-editor-step-2024-inner .letro-editor-step-2024-inner-step { display: flex; flex-direction: column}
.letro-editor-step-2024-inner .letro-editor-step-2024-inner-step li { background: #FFEFE3; border-radius: 5px; font-size: 2.2rem; margin-bottom: 40px; padding: 16px 30px; position: relative;}
.letro-editor-step-2024-inner .letro-editor-step-2024-inner-step li:last-child { margin-bottom: 0;}
.letro-editor-step-2024-inner .letro-editor-step-2024-inner-step li .step-num { border-right: 1px solid #FF864E; margin-right: 20px; padding-right: 20px}
.letro-editor-step-2024-inner .letro-editor-step-2024-inner-step li .step-num img { height: 22px}
.letro-editor-step-2024-inner .letro-editor-step-2024-inner-step li:after { background: url(https://service.aainc.co.jp/hubfs/letroLP/letro_2024/icon/icon_arrow_down_orange_solid.svg) no-repeat; background-size: contain; bottom: -25px; content: ""; height: 10px; left: 50%; margin-left: -8px; position: absolute; width: 16px;}
.letro-editor-step-2024-inner .letro-editor-step-2024-inner-step li.step3:after { content: none;}

@media screen and (max-width: 1199px) {
  .letro-editor-flow-2024-inner { max-width:1080px; margin: 0 auto 60px auto;}
  .letro-editor-flow-2024-inner h2 { padding:0; }
  .letro-editor-flow-2024-list { gap:30px; }
}
@media screen and (max-width: 820px) {
  .letro-editor-flow-2024 { padding: 60px 20px;}
  .letro-editor-flow-2024-inner h2 { font-size:1.8rem; }
  .letro-editor-flow-2024-list { width: 480px; background-size:320px; }
  .letro-editor-flow-2024-list li h3 { height: 80px; width: 80px; text-align: center; line-height: 1.3;}
  .letro-editor-flow-2024-list li h3.create, .letro-editor-flow-2024-list li h3.analytics { font-size: 1.6rem; }
  .letro-editor-flow-2024-list li h3.publish { border:4px solid #FFF; font-size:2.4rem; width:120px; height:120px; }
  .letro-editor-flow-2024-inner .letro-editor-flow-2024-video { width:480px; position:relative; margin:0 auto; }
  .letro-editor-flow-2024-inner .letro-editor-flow-2024-video img { width: 100%; z-index: 2;}
  .letro-editor-flow-2024-inner .letro-editor-flow-2024-video .letro-editor-flow-video { position: absolute; z-index: 1; width: 370px; height: auto; top: 17px; left: 50%; margin-left: -184px;}

  .letro-editor-step-2024-inner h2 { width:180px; height:180px; font-size:2.2rem;}
  .letro-editor-step-2024-inner h2 small { font-size:1.4rem; margin-bottom: 10px;}
  .letro-editor-step-2024-inner h2:after { background: url(https://service.aainc.co.jp/hubfs/letroLP/letro_2024/icon/icon_arrow_down_orange_solid.svg) no-repeat; background-size: cover; content: ""; height: 20px; position: absolute; width: 30px; top: 50%; right: -22px; margin-top: -10px; transform: rotate(270deg);}
  .letro-editor-step-2024-inner .letro-editor-step-2024-inner-step { width:calc(100% - 220px); }
  .letro-editor-step-2024-inner .letro-editor-step-2024-inner-step li { font-size: 1.8rem; padding: 10px 20px;}
  .letro-editor-step-2024-inner .letro-editor-step-2024-inner-step li .step-num img { height: 18px;}
}
@media screen and (max-width: 480px) {
  .letro-editor-flow-2024 { padding: 40px 20px;}
  .letro-editor-flow-2024-inner { margin: 0 auto 20px auto;}
  .letro-editor-flow-2024-inner h2 { font-size:1.6rem; margin-bottom: 20px;}
  .letro-editor-flow-2024-inner .letro-editor-flow-2024-catch { font-size:1.8rem; }
  .letro-editor-flow-2024-list { width: 330px; background-size:190px; }
  .letro-editor-flow-2024-list li h3 { height: 80px; width: 80px; text-align: center; line-height: 1.3;}
  .letro-editor-flow-2024-list li h3.create, .letro-editor-flow-2024-list li h3.analytics { font-size: 1.6rem; }
  .letro-editor-flow-2024-list li h3.publish { border:4px solid #FFF; font-size:2.4rem; width:120px; height:120px; }
  .letro-editor-flow-2024-inner .letro-editor-flow-2024-video { width:340px; position:relative; margin:0 auto; }
  .letro-editor-flow-2024-inner .letro-editor-flow-2024-video img { width: 100%; z-index: 2;}
  .letro-editor-flow-2024-inner .letro-editor-flow-2024-video .letro-editor-flow-video { position: absolute; z-index: 1; width: 262px; height: auto; top: 12px; left: 50%; margin-left: -129px;}
  .letro-editor-step-2024-inner { display:flex; gap:0 40px; align-items:center; flex-direction: column;}
  .letro-editor-step-2024-inner h2 { width:100%; height:auto; font-size:2.0rem; padding: 20px 0; margin-bottom: 20px; border-radius: 15px;}
  .letro-editor-step-2024-inner h2 small { font-size:1.4rem; margin-bottom: 10px;}
  .letro-editor-step-2024-inner h2:after { background: url(https://service.aainc.co.jp/hubfs/letroLP/letro_2024/icon/icon_arrow_down_orange_solid.svg) no-repeat; background-size: cover; content: ""; height: 20px; position: absolute; width: 30px; top: initial; bottom: -18px; right: 50%; margin-top: 0; margin-right:-15px; transform: rotate(0deg);}
  .letro-editor-step-2024-inner .letro-editor-step-2024-inner-step { width:100%; }
  .letro-editor-step-2024-inner .letro-editor-step-2024-inner-step li { font-size: 1.6rem; padding: 10px 20px;}
  .letro-editor-step-2024-inner .letro-editor-step-2024-inner-step li .step-num { margin-right: 15px; padding-right: 10px}
  .letro-editor-step-2024-inner .letro-editor-step-2024-inner-step li .step-num img { height: 16px;}