@charset "utf-8";
/* Quickly CSS */

.cont1024 { max-width: 1054px; padding: 0 15px; margin: auto;}
.bold { font-weight: 700;}
.fo11 { font-size: 1.1em;}
.fo15 { font-size: 1.5em;}
.lh14 { line-height: 1.4;}
.fo_green { color: #1BB38F;}
.fo_orange { color: #F05028;}
.fo_white { color: #fff;}
.back_green { background: #EEF7F4;}
.back_green02 { background: #1CB48F;}
.back_green03 { background: #F5F8F7;}
.back_orange { background: #FFF6F2;}
.back_orange02 { background: #F05028;}
.back_white { background: #fff;}
.radius06 img { border-radius: 0.6em;}

.mb05 { margin-bottom: 5px !important;}
.mb60 { margin-bottom: 60px !important;}
.mb50-30 { margin-bottom: 50px !important;}
.mb60-30 { margin-bottom: 60px !important;}
.mb100-50 { margin-bottom: 100px !important;}

@media screen and (max-width: 896px) {
  .mb50-30, .mb60-30 { margin-bottom: 30px !important;}
  .mb100-50 { margin-bottom: 50px !important;}
}


/* feature */
.under_pagettl { padding: 30px 0;}
.under_pagettl h2 { font-size: min(7vw,2em);}
.under_pagettl .en_ttl { font-size: 1.2em;}

.en_ttl { letter-spacing: 0.2em; font-size: 1.1em;}
.heading_middle { font-size: min(6.3vw,1.7em);}

.feature_box01 { display: flex; gap: 30px 2em;}
.feature_box01:nth-of-type(odd) { flex-flow: row-reverse;}
.feature_box01 > figure { width: 42%;}
.feature_box01 .box_inner { flex: 1;}
.feature_box01 .num { display: table; font-size: 0.85em; line-height: 1; letter-spacing: 0.05em; padding: 0.55em 1em; border-radius: 0.25em;}
.feature_box01 .tag01 { display: flex; flex-wrap: wrap; gap: 0.8em 1em; font-size: 0.75em;}
.feature_box01 .tag01 div { border: solid 1px #CFE7DF; border-radius: 2em; line-height: 1; padding: 0.8em 1.2em;}
.feature_box01 .tag02 { display: flex; gap: 0.8em;}
.feature_box01 .tag02 div { flex: 1; border-radius: 0.3em; line-height: 1.3; padding: 1em;}
.feature_box01 .tag02 div .bold { font-size: 1.25em;}
.feature_box01 .tag02 .num02 { font-size: 1.45em;}

.cta_box01 { padding: 50px 0;}
.cta_box01 .cta_text01 { display: table; margin: 0 auto 1.8em; font-size: 0.9em; padding: 0.4em 1em; border-radius: 0.2em;}
.cta_box01 .btn_box { display: flex; justify-content: center; gap: 1em; flex-wrap: wrap;}
.cta_box01 .btn_box a { display: flex; align-items: center; height: 3.8rem; border-radius: 0.35rem; text-decoration: none; font-weight: bold; transition: 0.3s;}
.cta_box01 .btn_box a:hover { opacity: 0.7;}
.cta_box01 .btn_box a:first-child { background: url("../img/service/telephone/features/ico_tel.svg") no-repeat 1.5em center #fff; background-size: 0.75em auto; font-size: 1.5em; color: #1BB38F; padding: 0 1.4em 0 2.8em; pointer-events: auto;}
.cta_box01 .btn_box a:last-child { background: url("../img/service/telephone/features/ico_arrow.svg") no-repeat calc(100% - 0.8em) center #F05028; background-size: 0.6em auto; color: #fff; padding: 0 2.3em 0 1em;}

.related_box { padding:  80px 0 100px;}
.related_box .art_box { display: flex; flex-wrap: wrap; gap: 25px 20px; line-height: 1.6;}
.related_box .art_box a { width: calc((100% - 40px) / 3); border-radius: 0.6em; box-shadow: 0 3px 6px rgba(0,0,0,0.15);}
.related_box .art_box .back_white { border-radius: 0.6em; overflow: hidden; height: 100%; display: flex; flex-flow: column;}
.related_box .art_box figure { aspect-ratio: 33/13; overflow: hidden;}
.related_box .art_box figure img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s;}
.related_box .art_box a:hover figure img { transform: scale(1.05);}
.related_box .art_box .box_inner { padding: 1.2em; display: flex; flex-flow: column; align-items: flex-start; gap: 0.5em; flex: 1;}
.related_box .art_box .ttl { flex: 1;}
.related_box .art_box .link_text { font-size: 0.9em; background: url("../img/service/telephone/features/ico_arrow_green.svg") no-repeat right center; background-size: 0.35em auto; padding-right: 1em;}


@media screen and (max-width: 896px) {
  .low_h1box { height: auto;}
}

@media screen and (max-width: 768px) {
  .feature_box01 { flex-flow: column !important;}
  .feature_box01 > figure { width: 100%;}
  .related_box { padding:  50px 0 60px;}
}

@media screen and (max-width: 640px) {
  .related_box .art_box a { width: calc((100% - 20px) / 2); font-size: min(3.5vw,1em);}
}

@media screen and (max-width: 480px) {
  .feature_box01 .tag02 { flex-flow: column;}
  .cta_box01 .fo15 { font-size: min(6vw,1.5em);}
  .cta_box01 .cta_text03 { font-size: min(3.4vw,1em);}
  .cta_box01 .btn_box { font-size: min(4.5vw,1em);}
}

@media screen and (max-width: 380px) {
  .related_box .art_box a { width: 100%; font-size: 1em;}
}