/* function-common */
.letro-about-function { background: url(https://service.aainc.co.jp/hubfs/letroLP/letro_2024/page/img_function_background.svg) no-repeat; background-size:100%; padding: 40px 0;  }
.function-item-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.function-item-maincontent h2 { position: relative; display: inline-block; font-weight: bold!important; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.12); font-size: 2.8rem; letter-spacing: .2rem; color: #FF864E; background: #fff; padding: 8px 60px 8px 110px; margin-bottom: 0px!important; }
.function-item-maincontent h2.function-header-0304 { padding: 8px 60px 8px 190px; }
.letro-topPage .function-item-maincontent h2 .function-num { position:absolute; width:90px; height:90px; background:#FF864E; border-radius:50vw; box-shadow:0 3px 10px rgba(0,0,0,0.12); display:flex; justify-content:center; align-items:center; top:-12px; left:-20px; }
.letro-topPage .function-item-maincontent h2 .function-num img { height:32px; }
.function-item-maincontent h2.function-header-0304 { color:#338FF9; }
.function-item-maincontent h2.function-header-0304 .function-num { background:#338FF9; }
.letro-topPage .function-item-maincontent h2 .function-num-04{ left:60px; }
.function-item-maincontent .function-box { display: flex; align-items: center; background: #fff; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.12); padding: 50px 50px 50px 80px; margin: -20px 0 60px; }
.function-item-maincontent .function-box .function-box-text { width: calc(100% - 280px); position:relative; }
.function-item-maincontent .function-box .function-box-text h3 { font-size: 2.6rem; margin-bottom: 20px; line-height:1.6; }
.function-item-maincontent .function-box .function-box-text h3 b { color: #FF864E; }
.function-item-maincontent .function-box .function-box-img { width:280px; }
.function-item-maincontent .function-box .function-box-img img { max-height: 260px; margin-left: 40px;  }

/* genarate */
.function-item-maincontent .function-box .function-box-text .function-title-bubble { min-width: 162px; color: #064F69; font-size:1.4rem; line-height:1.3; background: url(https://service.aainc.co.jp/hubfs/letroLP/letro_2024/page/img_speech-bubble.svg) no-repeat bottom left; text-align:center; padding-bottom:28px; transform: rotate(5deg); position:absolute; top:-25px;; right:0;  }
.function-item-maincontent .function-box .function-box-text .function-title-bubble small { font-size:1rem; }
.function-item-maincontent .function-box .function-box-text .function-title-bubble img { padding-left:3px; }
.function-item-maincontent .function-box .function-box-text .function-description { line-height: 1.9; }
.function-item-subcontent { max-width: 1040px; margin: 0 auto 100px; text-align: center; }
.function-item-container .ugc-difficulty { margin-bottom: 50px; }
.function-item-subcontent h4 { font-size: 2.4rem; margin-bottom: 24px; }
.function-item-subcontent h4.ugc-difficulty-lead { display: flex; align-items: center; justify-content: center;  }
.function-item-subcontent h4.ugc-difficulty-lead img { width: 40px; }
.function-item-subcontent .ugc-difficulty-description-container { display: flex; justify-content: center; padding: 32px 0; border-radius: 8px; background: #F8F8F8; }
.function-item-subcontent .description-item { margin: 0 40px; }
.function-item-subcontent .description-item p { margin-bottom: 10px; font-size: 2.0rem; }
.function-item-subcontent .description-image { display: flex; align-items: center; justify-content:center; margin-bottom: 50px; background: #fff; border-radius: 8px; width: 350px; height: 145px; }
.function-item-subcontent .description-image img { width: 280px; }
.function-item-subcontent .description-item h5 { font-size: 2.0rem; line-height: 1.6; position:relative; }
.function-item-subcontent .description-item h5:before { content:''; display: block; position:absolute; left: calc(50% - 20px); top: -34px; vertical-align: middle; width: 40px; height: 20px; background: url(https://service.aainc.co.jp/hubfs/letroLP/img_letro_difficulty_arrow.svg); background-size: contain; }
.function-item-subcontent .integrated-cartsystem-description { font-size: 1.6rem; margin: 20px; }
.function-item-subcontent .integrated-cartsystem-image { display: flex; flex-wrap: wrap; justify-content: space-between; }
.function-item-subcontent .integrated-cartsystem-image img { display: inline-block; height: 52px; }

@media screen and (max-width: 1279px) {
  .function-item-maincontent h2 { font-size: 2.4rem; letter-spacing: .1rem; padding: 8px 40px 8px 80px;}
  .function-item-maincontent h2.function-header-0304 { padding: 8px 50px 8px 160px; }
  .letro-topPage .function-item-maincontent h2 .function-num { width:80px; height:80px; top:-12px; left:-10px; }
  .letro-topPage .function-item-maincontent h2 .function-num-04{ left:60px; }
  .letro-topPage .function-item-maincontent h2 .function-num img { height:22px; }
}
@media screen and (max-width: 1008px) {
  .function-item-maincontent .function-box .function-box-text .function-title-bubble { display:none;  }  
  .letro-topPage .function-item-maincontent h2 { font-size: 2.0rem; letter-spacing: .1rem; padding: 8px 35px 8px 70px; }
  .letro-topPage .function-item-maincontent h2.function-header-0304 { padding: 8px 35px 8px 115px; }
  .letro-topPage .function-item-maincontent h2 .function-num { width:60px; height:60px; font-size:3.2rem; top:-6px; left:-10px; }
}
@media screen and (max-width: 767px) {
  .letro-about-function { background: url(https://service.aainc.co.jp/hubfs/letroLP/letro_2024/page/img_function_background_sp.svg) no-repeat; background-size: 100%; padding: 40px 0; }
  .function-item-container { padding: 0 20px; }
  .letro-topPage .function-item-maincontent h2 { font-size: 2.0rem; letter-spacing: .1rem; padding: 8px 35px 8px 70px; }
  .letro-topPage .function-item-maincontent h2.function-header-0304 { padding: 8px 35px 8px 115px; }
  .letro-topPage .function-item-maincontent h2 .function-num { width:60px; height:60px; font-size:3.2rem; top:-6px; left:-10px; }
  .letro-topPage .function-item-maincontent h2 .function-num-04{ left:45px; }

  .function-item-maincontent h2:before { width: 80px; height: 80px; position: absolute; bottom: -15px; left: -25px; }
  .function-item-maincontent h2.function-header-0304:before { background: width: 105px; height: 78px; background-size: contain; } 
  .function-item-maincontent .function-box { flex-flow: column; padding: 50px 20px 15px; margin-bottom: 40px; }
  .function-item-maincontent .function-box .function-box-text { width: 100%; }
  .function-item-maincontent .function-box .function-box-text h3 { font-size: 2rem; }
  .function-item-maincontent .function-box .function-box-text .function-title-bubble { top:-40px;; right:-10px;  }

  .function-item-maincontent .function-box .function-box-text p { font-size: 1.4rem; }
  .function-item-maincontent .function-box .function-box-img { width: 200px; margin: 20px 0 0 0; }
  .function-item-maincontent .function-box .function-box-img img { margin-left: 0; }
  .function-item-subcontent { margin: 0 auto 40px!important; }
  .function-item-subcontent h4 { font-size: 1.8rem; line-height: 1.6; }
  .function-item-subcontent .description-item { margin: 0; }
  .function-item-subcontent .description-item p { font-size: 1.6rem; }
  .function-item-subcontent .description-image { width: calc(100% - 30px); margin: 0 auto 50px; }
  .function-item-subcontent .description-image img { width: 270px; }
  .function-item-subcontent .description-item h5 { font-size: 1.6rem; }
  .function-item-subcontent .ugc-difficulty-description-container { flex-flow: column; }
  .function-item-subcontent h4.ugc-difficulty-lead img { padding-right: 10px; }
  .function-item-subcontent .description-item_bySegment { margin: 0 0 30px;}
  .function-item-subcontent .description-item_bySegment h5 { display: inline-block; border-bottom: 1px solid #ccc; padding-bottom: 30px; }
  .function-item-subcontent .integrated-cartsystem-description { margin: 0 auto 20px; font-size: 1.4rem; text-align: left; }
  .function-item-subcontent .integrated-cartsystem-image { justify-content: center; padding-bottom: 20px; }
  .function-item-subcontent .integrated-cartsystem-image img { height: 30px;  margin: 8px; }
}