@charset "UTF-8";
/*特定のページのみに適用させるスタイル
/Web_marketing/
---------------------------------------------------------*/

/*ヘッダーロゴ表示*/
.header-logo img{
      display: block;
      margin:0 auto;
}
@media screen and (max-width:768px) {
      header{
            margin-top: -105px;
            padding-top: 60px;
      }
}

p{
      font-size: 1.8rem;
      font-weight: 500;
}
.l-contents {
    width: 100%;
    margin: 0;
}
.bg_gray{
      background-color: #eff2f4;
}
.bg_orange{
      background-color: #f8efec;
}
.bg_ex{
      background-image: url(../images/ex_bg.png);
      background-size: cover;
      background-repeat: no-repeat;
}
.c_blue{
      font-weight: bold;
      color: #2e4b70;
}
.cap{
      font-weight: 500;
      font-size: .8em;
      color: #6d6d6d;
      padding: 5px 0;
}

.h2-read{
      text-align: center;
}
.pt40{
      padding-top: 40px !important;
}
.pt60{
      padding-top: 60px !important;
}
.pb40{
      padding-bottom: 40px !important;
}
.pb60{
      padding-bottom: 60px !important;
}
.pb80{
      padding-bottom: 80px !important;
}

@media screen and (max-width:600px) {
.non600-{
display: none;
}
}

.h2-sub{
      color: #abc453;
      font-weight: bold;
      font-size: 14px;
      padding: 0;
      display: block;
      }
h2.tit_big{
      color: #2e4b70;
      margin: 0;
    width: 100%;
    background: none;
    padding: 2rem;
    border-bottom: 0;
    font-size: 3rem;
    line-height: 1.7;
    font-weight: bold;
    text-align: center;
}
.tit_big::after{
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background-color: #abc453;
    margin: 15px auto 0;
}
@media screen and (max-width:768px) {
      p{
      font-size: 1.6rem;
      }
      .h2-read{
      font-size: 1.6rem;
      }
      h2.tit_big{
      color: #2e4b70;
      margin: 0;
      width: 100%;
      background: none;
      padding: 2rem;
      border-bottom: 0;
      font-size: 2.5rem;
      line-height: 1.4;
      }

      .pc_non{
            display:initial;
      }
      .sp_non{
            display: none;
      }
}
@media screen and (min-width:769px) {
      .pc_non{
            display: none;
      }
      .sp_non{
           display:initial;
      }
      }

      .l-fv{
      background-image: url(../images/fv_bg.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: right top;
      }
@media screen and (max-width:1000px) {
      .l-fv{
          background-position: 85% center;
      }
}
@media screen and (max-width:768px) {
      .l-fv{
          background-position: 100% center;
          background-image: url(../images/fv_bg_sp.png);
      }
}
.l-fv-inner{
  width: 95%;
  max-width: 1180px;
  padding: 40px 2.5%;
   margin:0 auto;
}
.fv-cta-inner2{
      display: flex;
      align-items:flex-end;
}
.fv-catch{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size: 2em;
  line-height: 1.6;
  color:#2e4b70;

  text-shadow:
    0 0 10px rgba(255, 255, 255, 1);
}
.fv-catch .st{
 color:#d35e46;
}

.st01{
  display: block;
  margin-bottom: 5px;
}
.st span{
  border:1px solid #d35e46;
  background-color: #fff;
  padding: 2px 14px 4px;
   
}

 .chevron-container {
  margin-top:20px;
        width: 420px;
        height: 100px;
        display: flex;
        gap: 0;
        position: relative;
  }

  .chevron-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 23px;
        line-height: 1.2;
        text-align: center;
        position: relative;
  }

  .chevron-item::after {
        content: '';
        position: absolute;
        left: 100%;
        top: 0;
        width: 24px;
        height: 100%;
        background: var(--chevron-bg);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        z-index: 2;
  }

  .chevron-item:last-child::after {
        display: none;
  }

  .chevron-item.green {
        background: #4CC63C;
        --chevron-bg: #4CC63C;
        z-index: 4;
      border-right:1px solid #4CC63C;
  }

  .chevron-item.teal {
        background: #2AABAA;
        --chevron-bg: #2AABAA;
        margin-left: -24px;
        z-index: 3;
        padding-left:30px;
        border-right:1px solid #2AABAA;
  }

  .chevron-item.navy {
        background: #1F3A4D;
        --chevron-bg: #1F3A4D;
        margin-left: -24px;
        z-index: 1;
        padding-left:30px;
  }

  .text-wrapper {
        display: flex;
        flex-direction: column;
        gap: 4px;
  }

  .fv-txt{
    margin-top:20px;
    font-size: 20px;
    font-weight: bold;
  }

  .fv-cta{
    background:rgba(46,75,112,0.8);
    margin:0 auto;
  }
.fv-cta-inner{
      max-width: 1180px;
      width: 95%;
      padding: 0 2.5%;
      margin:0 auto;
      display: flex;
      align-items: center;
  }
  .fv-cta-txt{
      font-size: 24px;
      color:#fff;
      font-weight: bold;
      padding: 20px;
      line-height: 1.3;
  }
  .fv-cta-txt span{
      display: inline-block;
      white-space: nowrap;
  }
  .fv-cta-ill{
      width: 15%;
      height: 15%;
      margin-top: -20px;
  }
  .fv-cta-btn{
      width: 30%;
      max-width: 460px;
      min-width: 250px;
  }
@media screen and (min-width:901px)  and (max-width:1000px){
  .fv-cta-txt{
      font-size: 20px;
  }
}

@media screen and (min-width:769px)  and (max-width:900px){
  .fv-cta-txt{
      font-size: 18px;
      color:#fff;
      font-weight: bold;
      padding: 20px;
  }
  .fv-cta-ill{
      width: 23%;
      height: 23%;
  }
}

@media screen and (max-width:768px) {
.fv-catch{
font-size: 5vw;
}
.l-fv-inner{
   padding: 30px 2.5%;   
}
.chevron-item{
 font-size: 17px;     
}
.chevron-container {
    margin-top: 15px;
    width: 90%;
    height: 60px;
}
.text-wrapper {
    line-height: 1;
}
  .fv-cta-inner{
      flex-wrap: wrap;
      width: 100%;
      padding: 0;
  }
  .fv-cta-inner2{
      position: relative;
      width: 95%;
      margin:0 2.5%;
      align-items: center;
  }
  .fv-txt{
      line-height: 1.3;
      margin-top: 15px;
      margin-bottom:40%;
      font-size: 4vw;
      text-shadow:
    0 0 10px rgba(255, 255, 255, 1);
  }
  .fv-cta-ill{
      flex-shrink: 0;
      width: 30%;
      position: relative;
  }
  .fv-cta-txt{
      flex: 1 1 auto;
      min-width: 0;
      font-size: 3.5vw;
      padding: 15px 10px;
      line-height: 1.2;
  }
  .fv-cta-btn{
      width: 100%;
      max-width: 768px;
      padding: 10px 0;
      margin: 0 auto;
      background-color: #2e4b70;
      padding: 0;
  }
  .fv-cta-btn img{
      width: 80%;
      margin:20px auto;
      max-width: 320px;
      display: block;
  }
}

@media screen and (max-width:425px) {
    .fv-catch {
        font-size: 1.2em;
    }
  .fv-txt {
      font-size: 16px;
      }
}

/*セクション2 お悩み*/
.sec-problem{
     background-image: url(../images/nayami_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top; 
    padding: 20px 0 40px 15%;
}
.h2-sub-pc{
      color: #abc453;
      font-weight: bold;
      font-size: 14px;
      padding: 40px 0 0 15%;
}
      .h2-sub-sp{
            display: none;
      }
.problem-inner{
    background:rgba(250,250,250,0.8);
}
.problem-txt{
    background-image: 
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5)),
    url(../images/img_nayami01.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;  
}

.problem-txt h2{
      color: #2e4b70;
      margin: 0 0 2rem;
    width: 100%;
    background-image: url(../images/img_nayami02.svg);
    background-size: 140px;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-position-x: 23%;
    padding: 3rem 2.3rem 1.5rem 15%;
    border-bottom: 0;
    font-size: 3rem;
    line-height: 1.3;
    font-weight: bold;
}

.problem-txt ul {
  /* デフォルトの丸を非表示にする */
  list-style: none;
  font-size: 2.3rem;
  font-weight: bold;
  padding: 0 20px 40px 18%;
  margin-bottom:0;
}

.problem-txt ul li {
  /* li要素の背景に画像を配置 */
  background-image: url(../images/icon_check.png);
  background-repeat: no-repeat;
  /* 画像の表示位置（中央寄せなど） */
  background-position: left center;
  /* 画像のサイズ調整 */
  background-size: 25px 25px; 
  /* テキストが画像に被らないように左側の余白を設定 */
  padding-left: 30px;
  /* 行ごとの間隔 */
  margin-bottom: 8px;
}
.sec-btm{
      background-color: #2e4b70;
}
.sec-btm-inner{
      padding: 35px 20px 25px ;
      display: flex;
      position: relative;
      max-width: 1180px;
      width: 95%;
      margin:0 auto;
      align-items: center;
}
.sec-btm p{
      color: #fff;
      font-size: 2rem;
      font-weight: bold;
      padding:0 20px 0 30px;
}
.sec-btm img{
      margin-top:-200px;
      position: relative;
      width: 15%;
      height: 15%;
      }

@media screen and (max-width:1170px) {
      .h2-sub-pc{
      padding-left: 5%;
      }
      .problem-txt h2 {
      padding-left: 3%;
      }
      .problem-txt ul {
      padding-left:8%;
      }
}
@media screen and (max-width:1050px) {
      .h2-sub-sp{
      color: #abc453;
      font-weight: bold;
      font-size: 14px;
      padding: 0;
      display: block;
      }
      .h2-sub-pc{
            display: none;
      }
      .problem-txt{
        background-image: none;
      }
      .problem-txt h2 {
             padding-left: 3%;
          background-image: 
            linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5)),
            url(../images/img_nayami01.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: right;  
      }

      .sec-problem {
      padding: 20px 0 40px 0;
      }
      .problem-txt ul {
        padding-left: 25px;
        font-size: 2.1rem;
    }

    .sec-btm-inner{
      flex-direction: row-reverse 
      }
      .sec-btm p {
      padding: 0;
      line-height: 1.3;
      font-size: 1.8rem;
      }
      .sec-problem{
      padding: 20px 0 0 0;
      }
      .sec-btm img{
            margin-top: -50px;
      }
}
@media screen and (max-width:730px) {
      .sec-btm img{
            margin-top: 0px;
      }
      .sec-btm-inner {
        align-items: center;
    }
}

@media screen and (max-width:440px) {
      .problem-txt h2{
            font-size: 1.4em;
            padding-left: 5%;
            border: none;
      }
      .h2-sub-sp {
        font-size: 12px;
      }
      .problem-txt ul li{
            line-height: 1.3;
      }
      .problem-txt ul {
        font-size: 1.7rem;
        padding: 0 20px 30px;
    }
    .sec-btm-inner {
    width: 100%;
    padding: 20px;
    }
    .sec-btm p {
        padding: 0 10px 0 0;
        line-height: 1.4;
        font-size: 1.5rem;
        font-weight: bold;
    }
    .sec-btm img {
      width: 18%;
      height: 18%;
      }

}

/*セクション3 重要性*/

.sec-importance .sec_inner{
      display: flex;
      width: 95%;
      max-width: 1180px;
      margin: 30px auto 0;
      padding-bottom: 50px;
      flex: 1 2;
}
.sec-importance .sec_inner p{
      font-weight: 500;
      padding: 0 25px 25px;
}
.si1{
      flex: 3;
}
.si2{
      flex: 4;
}
@media screen and (max-width:768px) {
      .sec-importance .sec_inner{
      display: grid;
      gap:20px;
      }
      .si1{
      width: 95%;
      margin:0 auto;
      }
      .sec-importance .sec_inner p{
      padding: 0 16px 16px;
      }
}
.sec-btm .i_link{
      display: block;
      text-align: right;
      margin-top:10px;
}
.sec-btm a{
      font-size: .9em;
      color:#a3cdda;
      font-weight: 500;
      
}

/*セクション4 理由*/
.sec-reason .sec_inner{
      width: 100%;
      max-width: 1180px;
      margin: 30px auto 0;
      padding-bottom: 50px;
      flex: 1 2;
}

.sec-reason .sec_inner .rsn{
      display: flex;
      align-items: center;
      gap:15px;
      margin-bottom:30px;
}

.sec-reason .sec_inner h4{
      color: #2e4b70;
      font-weight: bold;
      font-size: 2.1rem;
      padding: 0 0 0 1rem;
      margin: 1rem 0 0;
}
.sec-reason .sec_inner .sir1{
      flex: 1;
}
.sec-reason .sec_inner .sir2{
      flex: 1;
}
.si_icon{
      width: 100px;
}
.rsn_txt{
      padding: 15px;;
}
.sec-reason .sec-btm-inner{
     flex-direction: row-reverse; 
}
.sec-reason .sec-btm img{
     width: 25%;
    height: 25%; 
    margin-top:-100px;
}
.sec-reason .sec-btm p {
    padding: 0 30px 0 20px;
}

@media screen and (max-width:900px) {
        .pc900{
            display: none;
      }
      .sp900{
            display: block;
      }    
}
@media screen and (min-width:901px) {

      .pc900{
            display: block;
      }
      .sp900{
            display: none;
      }
}

@media screen and (max-width:768px) {
      .sec-reason .sec_inner .rsn{
            display: grid;
            gap:0;
            margin-bottom:10px;
      }
      .sec-reason .sec_inner .rsn.rsn2 .rsn_txt{
            order:2;
      }
      .sec-reason .sec_inner .rsn.rsn2 .rsn_img{
            order:1;
      }
      .rsn_txt{
            position: relative;
      }
      .si_icon{
      width: 160px;
      position: absolute;
      margin-top:-110px;
      background-color: #fff;
      padding: 10px 30px 10px 25px;
      border-radius: 0 40px 40px;
      }
      .sec-reason .sec-btm-inner{
      display: grid;
      margin-top:100px;
      }
      .sec-reason .sec-btm img{
            width: 80%;
            height: auto;
            margin:-200px auto 15px;
            }
}


/*セクション5 注意*/
.sec-warning .sec_inner{
      width: 100%;
      max-width: 1180px;
      margin: 50px auto 0;
      padding-bottom: 30px;
      flex: 1 2;
}

.sec-warning .tit_big::after{
    background-color: #c45c3f;
}
.sec-warning h3{
    color: #c45c3f;
}

.sec-warning .sec_inner{
      display: grid;
      gap: 20px;
      grid-template-columns: 1fr 1fr;
}
.wrn{
      background-color: #fff;
      padding:15px 15px 10px;
      box-shadow: 0px 0px 11px -5px #c57b63;
      position: relative;
}
.wrn h4{
      color: #c45c3f;
      font-size: 1.3em;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left:8%;
}
.wrn h4::before{
      content: '';
      display: block;
      width: 60px;
      height: 75px;
      flex-shrink: 0;
      background: url('../images/icon_wng.svg') no-repeat center / contain;
      margin-right: 10px;
      position: absolute;
      margin-top: -8%;
    left: -1px;
}
.wrn h4::before{
      content: '';
      display: block;
      width: 60px;
      height: 75px;
      flex-shrink: 0;
      background: url('../images/icon_wng.svg') no-repeat center / contain;
      margin-right: 10px;
      position: absolute;
      margin-top: -8%;
    left: -1px;
}
.sec-warning .sec-btm{
       width: 100%;
      max-width: 1180px;
      margin: 20px auto 0;
      background-color: #c45c3f;
}
.sec-warning .sec-btm p{
      margin-bottom: 0;
}
.sec-warning .sec-btm img{
            margin-top: 0;
    width: 10%;
    height: 10%;
      }
.sec-warning  .sec-btm-inner {
    padding: 16px;
}

@media screen and (max-width:768px) {
      .sec-warning .sec_inner{
      grid-template-columns: 1fr;
      }
      .wrn h4::before{
      width: 50px;
      height: 63px;
      margin-top: -8%;
      left: 10px;
      }
      .wrn h4{
      font-size: 1.2em;
      margin-left:13%;
      }
      .sec-warning .sec-btm-inner {
      flex-direction: row;
      }
      .sec-warning .sec-btm p{
            padding: 0 0 0 10px;
      }
}


/*セクション6 他社との比較*/
.sec-comparison .sec_inner{
      width: 100%;
      max-width: 1180px;
      margin: 50px auto 0;
      padding-bottom: 30px;
      flex: 1 2;
}

.sec-comparison .tit_big::after{
    background-color: #abc453;
}
.sec-comparison h4{
    color: #abc453;
      font-size: 2.5rem;
    text-align: center;
    font-weight: bold;
}
@media screen and (max-width:768px) {
    .sec-comparison h4 {
    font-size: 2.3rem;
    }
}

/*比較表*/
.cmp-table{
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
}
.cmp-table th,
.cmp-table td{
      padding: 14px 16px;
      border: 1px solid #ddd;
      font-size: 1.6rem;
      vertical-align: middle;
      line-height: 1.5;
}

/*1列目：比較項目*/
.cmp-table .col-item{
      width: 24%;
      background-color: #2e4b70;
      font-weight: bold;
      color: #fff;
      text-align: left;
      font-size: .7em;
}

/*3列目：他社*/
.cmp-table .col-others{
      width: 38%;
      background-color: #fff;
      color: #565656;
      text-align: center;
}
.cmp-table thead .col-others{
      background-color: #565656;
      color: #fff;
      font-weight: bold;
      font-size: .8em;
}

/*2列目：当社*/
.cmp-table .col-ours{
      width: 38%;
      background-color: #e6edc0;
      color: #2d4a6f;
      text-align: center;
      font-weight: bold;
}
.cmp-table thead .col-ours{
      background-color: #abc453;
      color: #fff;
      font-size: .8em;
}
.cmp-table th.col-ours,
.cmp-table td.col-ours{
      border-left: 3px solid #abc453;
      border-right: 3px solid #abc453;
      border-bottom: 1px solid #fff;
      border-top: 1px solid #fff;
}
.cmp-table td.col-ours-btm{
border-bottom: 3px solid #abc453;
}
.cmp-table th.col-ours-top{
border-top: 3px solid #abc453;
}

@media screen and (max-width:768px) {
      .cmp-table th,
      .cmp-table td{
            font-size: 1.4rem;
            padding: 10px 8px;
      }
}

/*セクション6 サービス*/
.sec-service{
      position: relative;
}
.svrc_ttl_img{
      position: absolute;
      margin-top:-5%;
      margin-left:5%;
      width: 25%;
      z-index: 1;
}
.sec-service .sec_inner{
      position: relative;
      z-index: 2;
      width: 90%;
      max-width: 1180px;
      margin: 0 auto;
}

.svrc_inner{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:16px;
      margin-top:30px;
}
.sec_inner .h2-read{
      padding: 1rem 0;
}

.srvc img{
      width: 20%;
      max-width: 80px;
      min-width: 50px;
      margin:0 auto;
      display: block;
}
.srvc h4{
      color: #2e4b70;
      margin:10px;
}
.srvc span.h4-sub{
      text-align: center;
      color: #abc453;
      font-weight: bold;
      font-size: 1.1em;
      display: block;
      margin:auto;
}

/*アコーディオン*/
.srvc{
background-color: #fff;
}
.srvc-body{
      background-color: #fff;
      /*max-height: 300px;
      overflow: hidden;
      transition: max-height 0.4s ease;*/
      padding: 15px;
}
.srvc.is-open .srvc-body{
      max-height: 2000px;
}
.srvc-toggle{
      display: block;
      width: 100%;
      height: 30px;
      margin: 0;
      background-color: #abc453;
      border: none;
      cursor: pointer;
      padding-bottom: 7px;
}
.srvc-toggle::after{
      content: '';
      display: block;
      width: 12px;
      height: 12px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(45deg);
      margin: 4px auto 0;
      transition: transform 0.3s ease;
}
.srvc.is-open .srvc-toggle::after{
      transform: rotate(-135deg);
      margin: 8px auto 0;
}
@media screen and (max-width:1050px) {
      .svrc_inner{
      grid-template-columns: 1fr 1fr;
      }
      .svrc_ttl_img{
      position: absolute;
      margin-top: -14%;
        margin-left: 2%;
        width: 27%;
        z-index: 1;
}
}
@media screen and (max-width:768px) {
      .svrc_inner{
      grid-template-columns: 1fr;
      }
      .srvc-body {
      background-color: #fff;
      /*max-height: 270px;*/
      }
      .srvc img{
      max-width: 50px;
      }
      .srvc span.h4-sub {
      font-size: 1em;
      }
      .srvc h4 {
      margin-bottom: 5px;
      }
      .svrc_ttl_img{
      position: absolute;
      margin-top: -18%;
      margin-left: 5%;
      width: 35%;
      z-index: 1;
}
}

/*セクション7 事例*/
.sec-ex .sec_inner{
      width: 90%;
      max-width: 1180px;
      margin: 0 auto;
}

.sec-ex .tit_big::after {
    background-color: #333;
}

.ex{
      margin-top:20px;
}
.ex h4{
      background-color: #42627f;
      display: flex;
      color: #fff;
      align-items: center;
      gap: 15px;
      margin-bottom: 0;
      text-align: left;
}
.ex h4 img{
      width: 120px;
}
.ex_body{
display: grid;
grid-template-columns: 1fr 2fr;
background-color: #fff;
}
.ex_parts{
      padding: 20px 20px;
}
.ex_parts span{
      padding:8px 13px;
      border-radius:30px;
      color:#fff;
      font-weight: bold;
}
.ex_parts p{
      margin-bottom: 0;
      padding: 15px 0 15px 15px;
}
.subject,.measures,.result{
      display: flex;
}

.subject span{
      background-color: #c45c3f;
      display: flex;
      align-items: center;
}
.measures span{
      background-color: #2d4a6f;
      display: flex;
      align-items: center;
}
.measures{
      border-top:#bdbdbd dashed 1px;
      margin-top:5px;
      padding-top: 5px;
}
.result span{
      background-color: #abc453;
      display: flex;
      align-items: center;
      text-align: center;
      padding: 8px;
}

.result p{
      margin-bottom:0;
}
.result{
      padding-left: 0;
}
.ex_parts ul{
      display: flex;
      gap:15px;
      list-style: none;
}
.ex_parts ul li{
      background-color: #f3f7e4;
      width: 50%;
}
.ex_parts ul li{
      width: 100%;
}
@media screen and (max-width:1000px) {
      .ex_parts ul {
            display: grid;
            grid-template-columns: 1fr;
      }
      .ex_parts ul li{
            width: 70%;
            max-width: 350px;
      }
}
@media screen and (max-width:900px) {
.ex_body{
grid-template-columns: 1fr 1fr;
}
}

@media screen and (max-width:768px) {
      .ex h4 {
            font-size: 1.7rem;
            padding-right: 10px;
      }
      .ex h4 img{
            width: 90px;
      }
      .ex_body{
      grid-template-columns: 1fr;
      }
      .ex_parts p{
            padding-top: 15px;
            margin-bottom:0;
      }
      .measures{
            border:0;
            border-top:#2d4a6f dashed 1px;
      }
      .result{
            border: 0;
            border-top:#abc453 dashed 1px;
      }
      .ex_parts span {
      padding: 8px;
      border-radius: 30px;
      text-align: center;
      }
      .result {
      padding-left: 20px;
      }
      .ex_parts ul li{
            width: 100%;
      }
}

/*セクション8 流れ*/
.sec-flow .sec_inner{
      width: 80%;
      max-width: 1180px;
      margin: 30px auto 60px;
      display: grid;
      grid-template-columns: 6fr 1fr 6fr 1fr 6fr 1fr 6fr;
      gap:0;
}
.fl{
  
}
.fl_icon{
      display: flex;
      align-items: center;
}
.fl_icon img{
      width: 100%;
}
.line{
      height: 3px;
      width: 100%;
      background-color: #6386a5;
      margin-top:300%;
}
.fl_body{
      margin-top:15px;
}
.fl_body p{
      padding: 1rem 0 0;

}
.fl_body span{
      color:#abc453;
      font-weight: bold;
      font-size: 1.6rem;
      display: block;
}
.fl_body h4{
      color:#2e4b70;
      font-size: 2.3rem;
}
@media screen and (max-width:768px) {
      .sec-flow .sec_inner{
      grid-template-columns: 1fr;
      }
.fl{
   display: flex;
   gap:15px;
   align-items: center;
}
.fl_icon{
      flex: 2;
}
.fl_body{
      flex: 3;
}
.fl_body h4{
      text-align: left;
      font-size: 2.1rem;
}
.line{
      height: 10px;
      width: 3px;
      background-color: #6386a5;
      margin-top:0;
      margin-left: 19%;
}
}
@media screen and (max-width:565px) {
      .sec-flow .sec_inner{
      width: 90%;
      }
      .fl_icon{
      flex: 1;
      }
      .fl_body{
      flex: 1;
      }
      .line{
      margin-left: 25%;
      }
}
@media screen and (max-width:470px) {
      .sec-flow .sec_inner{
      width: 95%;
      gap:10px;
      }
      .line{
      display: none;
      }
      .fl_icon{
      flex: 2;
      }
      .fl_body{
      flex: 3;
      }
}

/*サイドナビゲーションボタン＆パネル (769px以上のみ)*/
@media screen and (min-width: 769px) {
      .sideNavBtn {
            position: fixed;
            right: 0;
            top: 100px;
            z-index: 101;
            width: 44px;
            background-color: #b8cc62;
            color: #fff;
            border: none;
            cursor: pointer;
            padding: 16px 0 12px;
            border-radius: 20px 0 0 20px;
            box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            transition: opacity 0.2s ease, visibility 0.2s ease;
      }
      .sideNavBtn[aria-expanded="true"] {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
      }
      .sideNavBtn-txt {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            font-size: 1.5rem;
            font-weight: bold;
            letter-spacing: 0.05em;
            line-height: 1;
      }
      .sideNavBtn-arrow {
            display: block;
            width: 8px;
            height: 8px;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(135deg);
            transition: transform 0.3s ease;
      }
      .sideNavBtn[aria-expanded="true"] .sideNavBtn-arrow {
            transform: rotate(-45deg);
      }
      .sideNav {
            position: fixed !important;
            right: -270px;
            top: 100px;
            z-index: 100;
            width: 220px !important;
            min-width: unset !important;
            max-width: unset !important;
            max-height: unset !important;
            flex: unset !important;
            background-color: #fff;
            border-radius: 20px 0 0 20px;
            box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.2);
            padding: 16px;
            overflow: visible !important;
            transition: right 0.4s ease;
      }
      .sideNav.is-open {
            right: 0;
            border-radius: 0 0 0 20px;
      }
      .sideNavClose {
            position: absolute;
            right: 100%;
            top: 0;
            background-color: #b8cc62;
            color: #fff;
            border: none;
            cursor: pointer;
            padding: 12px 8px;
            border-radius: 20px 0 0 20px;
            box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            line-height: 1.3;
            white-space: nowrap;
      }
      .sideNavClose-x {
            font-size: 1.6rem;
            font-weight: bold;
            line-height: 1;
      }
      .sideNavClose-txt {
            font-size: 1.1rem;
            font-weight: bold;
      }
      .sideNav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: block;
      }

      .sideNav ul li.mt10 {
            margin-top: 10px;
      }
      .sideNav ul li a {
            display: block;
      }
      .sideNav ul li img {
            width: 100%;
            display: block;
      }
}