/*-------------------------
 page-service01.php
-------------------------*/

.service01 .balloon1-left {
  top: -23px;
  left: auto;
  right: 15px;
  position: absolute;
}


.service01 {
  color: #333333;
}

/* ---共通--- */


.service01 h2.lower {
  line-height: 1.3;
}

.service01 .wrap_lower04 {
  padding: 115px 2vw;
}

.service01 h4.lower {
  text-align: left;

}


h4.lower.lower-text {
  margin-bottom: 20px;
}

.head_title span.font {
  font-family: 'Montserrat', "Noto Sans CJK JP", sans-serif;
  font-size: 60px;
}

.red {
  color: #d7000f;
}

figure {
  text-align: center;
  margin-bottom: 60px;
  margin-left: 0;
  margin-right: 0;
}

/* スライダー */
.slider img {
  width: 100%;
  height: auto;

}

/* Magnific Popup */
.mfp-image-holder .mfp-content {
  max-width: 100%;
  width: 80%;
}

.mfp-bg {
  opacity: 0;
  transition: opacity .3s;

}

.mfp-bg.mfp-ready {
  opacity: 0.7;
}

.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all .3s ease-out;
}

.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}


/* ---googleアイコン--- */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  /* color: #fff; */
  vertical-align: middle;
  display: inline;
  font-size: 30px;
}



/* ---service-hero--- */

.service01 .service-hero {
  position: initial;
}

.service01 .service-hero .more {
  line-height: 1.3;
}

.more-lower {
  display: block;
  background: #d7000f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.333;
  margin-right: 1px;
  width: 26%;
  padding: 15px 0;
  text-align: center;
  border: 1px solid #d7000f;
  height: 50px;
  margin: 0 auto;
}


/* balloon */
.shopify-txt {
  position: relative;
}

/* ---accident--- */
.service01 .accident {
  position: relative;
  background: rgb(229, 233, 241);
  background: linear-gradient(180deg, rgba(229, 233, 241, 1) 0%, rgba(212, 221, 240, 1) 100%);
}

.service01 .accident__head {
  color: #002676;
  font-weight: 700;
}

.service01 .accident ul.accident_ul {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-evenly;

}

.service01 .accident li.accident_li {
  font-size: 18px;
  width: calc(50% - 15px);
  color: #002676;
  background-color: #fff !important;
  border-radius: 10px;
  margin-right: 0 !important;
  height: 80px;
  padding: 0 0;
  box-shadow: 10.4257px 10.4257px 56.2989px rgba(0, 0, 0, 0.07);
  display: table-column;
  justify-content: center;
  align-content: center;
}


/* ---about--- */
.about {
  position: relative;
}

.about::before {
  content: "";
  display: inline;
  position: absolute;
  top: 0;
  left: 50%;
  border: transparent 150px solid;
  border-top: #d4ddf0 50px solid;
  transform: translate(-50%, 0);
}


.ul.about_ul.flex.inne {
  justify-content: center;
}

.about ul.about_ul li.about_li {
  width: 20% !important;
  background: #002676;
  border-radius: 10px;
  /* background-image: url('https://as2.ftcdn.net/v2/jpg/03/64/75/07/1000_F_364750750_3sH9Z92vSeiMOWhRNHRx42j6bUWzzLzt.jpg'); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about ul.about_ul li.about_li .ttl,
.about ul.about_ul li.about_li .txt {
  color: #fff;
}

.about ul.about_ul li.about_li .ttl {
  font-size: 30px;
  font-family: 'Montserrat', 'Noto Sans CJK JP', sans-serif;
}

/* ---cdp--- */

.cdp {
  background-color: #e5e9f1;
}

/* ---crm--- */
.crm__block1 .crm__flex {
  /* align-items: center; */
}

.crm__block1 .crm__flex--img {
  width: calc(40% - 40px);
}

.crm__block1 .crm__flex--text {
  width: calc(60% - 5px);
}

.crm__block1 figure {
  margin-top: 0;
}

.crm__block2 .crm__link--cont {
  position: relative;
  display: block;
  background: #002676;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  max-width: 600px;
  width: 100%;
  margin: 5px auto;
  padding: 5px 0;
  line-height: 2;
  transition: all 0.3s ease;
}


.crm__block2 .crm__link--cont::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  box-sizing: border-box;
}


.crm__block2 .crm__link--cont:hover {
  transform: scale(1.02);
  /* Slightly enlarge */
  opacity: 0.7;
}



.crm__link--cont a span {
  color: #fff752;
}




.crm__block2 {
  margin-top: 50px;
  border-radius: 12px;
  background: #e5e9f1;
  padding: 5rem 10% 1rem;
  font-size: 16px;
  line-height: 2;
  text-align: center;
}


h2.crm__title {
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
  font-size: 30px !important;
  color: #333;
}

.crm__flex2--text {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  width: calc(50% - 10px);
  background-color: #fff !important;
  border-radius: 10px;
  padding: 30px 15px;
  box-shadow: 10.4257px 10.4257px 56.2989px rgba(0, 0, 0, 0.07);
  display: table-column;
  justify-content: center;
  align-content: center;
}

.crm__block2--primary,
.crm__block2--secondary {
  margin-bottom: 50px;
}

.crm__block2 p.crm__desc {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin: 30px 0;
}

ul.flex.crm__flex3 {
  align-items: stretch;
}

.crm__flex2--text3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  width: calc(33% - 10px);
  background-color: #fff !important;
  border-radius: 10px;
  padding: 30px 15px;
  box-shadow: 10.4257px 10.4257px 56.2989px rgba(0, 0, 0, 0.07);
  display: table-column;
  justify-content: center;
  align-content: center;
  align-items: stretch;
}

.crm__flex2--text4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  width: 100%;
  background-color: #fff !important;
  border-radius: 10px;
  padding: 30px 15px;
  box-shadow: 10.4257px 10.4257px 56.2989px rgba(0, 0, 0, 0.07);
  display: table-column;
  justify-content: center;
  align-content: center;
  margin-bottom: 30px;
}

/* ---ma--- */

.ma {
  background-color: #e5e9f1;
}

.ma .ma__desc {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin: 30px 0;
}

.ma__block {
  align-items: flex-start;
  justify-content: space-evenly;
  row-gap: 15px;
  column-gap: 15px;
}

.ma__block2 {
  margin-bottom: 50px;
}

.ma__flex--img {
  width: calc(50% - 5px);
  height: 200px;
  overflow: hidden;
  border: 1px solid #aaa;
  border-radius: 5px;
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}

.ma__flex--img:hover {
  transform: scale(1.02);
}



/* ---bi--- */
.bi__link__block {
  margin-bottom: 50px;
}



.bi__flex--link {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e5e9f1;
  border: 1px solid #e5e9f1;
  font-size: 16px;
  font-weight: 700;
  border-radius: 35px;
  width: 80%;
  height: 50px;
  color: #333;
  transition: transform 0.3s ease-out;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bi__flex--link a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 水平方向に中央揃え */
  width: 100%;
  height: 100%;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  /* テキストを中央揃え */
}


.bi__flex--link:hover {
  transform: scale(1.05);
  /* ホバー時に5%拡大 */
}

.bi__block_flex {
  align-items: flex-start;
  justify-content: space-evenly;
  row-gap: 15px;
  column-gap: 15px;

}

.bi__flex--img {
  width: calc(50% - 10px);
  height: 200px;
  overflow: hidden;
  border: 1px solid #aaa;
  border-radius: 5px;
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}

.bi__flex--img:hover {
  transform: scale(1.02);
}

.bi__flex--img img {
  width: auto;
  height: auto;

}

/* ---ai--- */

.ai {
  background-color: #f4f7f8;
}

/* ---security--- */
.security {
  background-color: #e5e9f1;
}

.security__subtitle span {
  display: inline-block;
  padding: 3px 10px;
  background: #002676;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  margin-bottom: 8px;

}

.security__flex--text {
  color: #002676;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 60px;
}

.security__flex--img img {
  border-radius: 5px;
}

.security__flex--text,
.security__flex--img {
  width: calc(50% - 10px)
}


/* ---creation---  */

.creation {
  background: url(https://marketing.f-i-d.jp/wp-content/themes/fid/assets/img/lower/service02/bg_cube.jpg) 100% 0 no-repeat #fff;
  background-size: 40%;
}

.creation__flex2--text {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  width: calc(25% - 5px);
  background-color: #e5e9f1 !important;
  border-radius: 10px;
  padding: 30px 15px;
  box-shadow: 10.4257px 10.4257px 56.2989px rgba(0, 0, 0, 0.07);
  display: table-column;
  justify-content: center;
  align-content: center;
  text-align: center;
}


.sales-growth {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  color: #002676;
  margin-bottom: 5px;
}


/* ---features---  */
.features {
  background-image: url('https://t3.ftcdn.net/jpg/02/92/61/16/240_F_292611647_H1l4RxQZMwUkSbQC7AFW0LC75SeHhmYp.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  /* 画面全体に画像を表示 */
  background-position: center;
  /* 画像を中央に配置 */
}

.features .wrap_lower04 {
  padding: 80px 2vw 60px;
}

.features h4.lower,
.features h2.lower {
  text-align: center;
  color: #fff;

}

.features h4.lower {
  margin-bottom: 0;
}

/* ---ops-support--text---  */
.ops-support--text {
  display: flex;
  flex-direction: column;
  width: calc(50% - 10px);
  padding: 25px 20px 20px;
  background-color: #e5e9f1 !important;
  text-align: center;
  border-radius: 10px;

}

.ops-support--header {
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
}

.ops-support--desc {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

/* ---Shopify--- */

@media (max-width: 768px) {

  /* ---共通--- */






  .head_title span.font {

    font-size: 35px;
  }

  .service01 .accident ul.accident_ul {
    align-items: stretch;
    justify-content: center;
  }

  /* Magnific Popup  */

  .mfp-image-holder .mfp-content {
    width: 100%;

  }

  .mfp-img {
    width: auto;
    height: 80%;
    max-width: none;
    /* 横幅に制限をかけない */
    max-height: 80vh;
    /* 画像の高さを画面の80%に */
    object-fit: contain;
  }

  .mfp-container {
    overflow-x: auto;
    /* 横方向のスクロールを有効にする */
    overflow-y: hidden;
    /* 縦方向のスクロールを無効にする */
  }


  /* ---service-hero--- */


  .service01 .service-hero .lead-txt {
    font-size: 18px;
  }

  .more-lower {
    width: 80%;
  }


  /* ---accident--- */
  .service01 .accident li.accident_li {
    font-size: 15px;
    height: auto;
    padding: 5px !important;
    border-radius: 4px;

  }


  /* ---about--- */

  .about ul.about_ul.flex.inner {
    align-items: stretch;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 8px;

  }

  .about ul.about_ul li.about_li {
    width: calc(48% - 2px) !important;
    height: auto !important;

  }

  .service01 .about .inner li:not(:last-child) {
    margin-right: 0;
  }

  .about ul.about_ul li.about_li .ttl {
    font-size: 20px;

  }

  .about ul.about_ul li.about_li .txt {
    font-size: 14px;
    font-weight: 600;
  }


  /* ---cdp---- */
  /* ---crm--- */

  .crm__block1 .crm__flex--img,
  .crm__block1 .crm__flex--text {
    width: 100%;
  }

  .crm__block2 {
    padding: 3rem 5% 1rem;
  }

  h2.crm__title {
    font-size: 20px !important;
  }

  .crm__block2 .crm__link--cont {
    font-size: 15px;
    line-height: 1.5;
  }

  .crm__block2 p.crm__desc {
    font-size: 14px;
  }


  .crm__block2--secondary .flex {
    justify-content: space-around;
  }

  .crm__flex2--text,
  .crm__flex2--text3,
  .crm__flex2--text4 {
    width: 100%;
    font-size: 14px;
    padding: 10px 15px;
    margin-bottom: 10px;

  }

  .crm .sub-title {
    padding: 0;
    width: 80%;
    margin-bottom: 10px;
  }

  li.crm__flex2--text2 {
    width: 30%;
    border-radius: 4px;
    height: 60px;
    margin-top: 5px;
  }


  /* ---ma--- */
  .ma .ma__desc {
    font-size: 14px !important;
  }

  .ma__flex--img {
    width: calc(100% - 5px);
    height: 200px;
    margin-bottom: 15px;
  }

  /* ---bi---- */
  .bi__flex--link {
    width: 100%;
    font-size: 14px;
  }

  .bi__flex--link a {
    text-align: left;
    padding: 15px;

  }


  .bi__flex--img img {
    width: auto;
    height: 100%;
    max-width: inherit;
  }


  /* ---ai--- */

  /* ---security--- */

  .security__flex--text {
    margin-bottom: 10px;
    text-align: center;
  }

  .security__flex--text,
  .security__flex--img {
    width: 100%;
  }

  .security__subtitle span {
    display: block;
    text-align: center;
    width: 80%;
    margin: 0 auto 8px;
    border-radius: calc(1px / 0);
  }

  .security__flex--text {
    font-size: 14px;
  }

  /* ---creation---  */
  .creation__flex2--text {
    font-size: 14px;
    padding: 10px 15px;
    margin-bottom: 10px;
    width: 100%;

  }


  .sales-growth {
    font-size: 16px;
  }

  /* ---ops-support---  */

  .ops-support--header {
    font-size: 18px !important;
  }

  .ops-support--text {
    margin-bottom: 10px;
    width: 100%;

  }

  .ops-support--desc {
    font-size: 14px;
  }
}




/* タブレット用のスタイルをここに記述 */

@media (min-width: 768px) and (max-width: 1024px) {

  .tab-only {
    display: block;
  }
}

/* タブレットサイズ以外では非表示 */
@media (max-width: 767px),
(min-width: 1025px) {
  .tab-only {
    display: none;
  }
}



.sub-title {
  display: inline-block;
  background: #002676;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: 5px auto 0;
  padding: 0 150px;
  max-width: 80%;
  border-radius: calc(1px / 0);
}


.crm__block2--secondary .flex {
  align-items: stretch !important;
}

.crm__flex2--text2 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  width: 15%;
  color: #002676;
  background-color: #fff !important;
  border-radius: 10px;
  padding: 10px 5px;
  box-shadow: 10.4257px 10.4257px 56.2989px rgba(0, 0, 0, 0.07);
  display: table-column;
  justify-content: center;
  align-content: center;
  margin-top: 20px;
  box-shadow: 10.4257px 10.4257px 56.2989px rgba(0, 0, 0, 0.07);
}