@charset "UTF-8";
/* COMMON STYLE */
.sa-bizreal { color: #000}
.sa-bizreal p { line-height: 1.8}
.sa-bizreal section { padding: 40px 0}
.sa-bizreal a { color: #da1716}
.sa-bizreal figure { margin: 0}
.sa-bizreal h2 { margin-bottom: 30px; font-size: 2.4rem; text-align: center; font-weight: bold; line-height: 1.3}
.sa-bizreal h2 big { color: #da1716; font-size: 4.0rem}
.sa-bizreal h2 img { width: 120px; vertical-align: sub}
.sa-bizreal .text-lead { font-size: 1.6rem; font-weight: bold; text-align: center}
.sa-bizreal .text-lead strong { color: #da1716}
.sa-bizreal .inner { width: 100%; margin: auto; padding: 0 20px}
.sa-bizreal .box-outline { display: flex; justify-content: space-between; flex-wrap: wrap}
.sa-bizreal .note li { padding-left: 30px}
.sa-bizreal .note span { margin: 0 10px 0 -30px}
.sa-bizreal .co-red { color: #da1716}
@media screen and (min-width: 768px) {
  .sa-bizreal section { padding: 80px 0}
  .sa-bizreal h2 { margin-bottom: 40px; font-size: 3.2rem}
  .sa-bizreal h2 img { width: 185px}
  .sa-bizreal .inner { max-width: 1030px}
  .sa-bizreal .text-lead { font-size: 2.20vw}
}
@media screen and (min-width: 990px) {
  .sa-bizreal .text-lead { font-size: 2.0rem}
}
/* ----------------------
 KV
---------------------- */
.sa-bizreal .kv { padding: 0 0 20px; background: url(../img/bg-kv-sp.jpg) no-repeat center center/cover}
.sa-bizreal .kv h1 { margin-bottom: 10px; font-size: 1.6rem; font-weight: bold; line-height: 1.5}
.sa-bizreal .kv h1 span { margin-bottom: 16px; display: block}
.sa-bizreal .kv h1 img { width: 60%}
.sa-bizreal .kv .label { display: flex; justify-content: center; margin-bottom: 20px}
.sa-bizreal .kv .label li { width: 30%; margin-left: 10px}
.sa-bizreal .kv .label li:first-child { margin-left: 0}
.sa-bizreal .kv .note { text-shadow:1px 1px 0 #ededed, -1px -1px 0 #ededed, -1px 1px 0 #ededed, 1px -1px 0 #ededed, 0px 1px 0 #ededed,  0-1px 0 #ededed, -1px 0 0 #ededed, 1px 0 0 #ededed}
@media screen and (max-width: 767px) {
  .sa-bizreal .kv .logo { width: 100%; padding: 20px; text-align: right}
  .sa-bizreal .kv .logo.dip img { width: 60px}
  .sa-bizreal .kv h1 { text-align: center}
  .sa-bizreal .kv figure { top: 0; right: -20px; width: 45%}
}
@media screen and (min-width: 768px) {
  .sa-bizreal .kv { position: relative; height: 550px; padding: 0;  background-image: url(../img/bg-kv-pc.jpg)}
  .sa-bizreal .kv .logo.dip { position: absolute; top: 25px; right: 50px; width: 91px; z-index: 3}
  .sa-bizreal .kv .inner { display: flex; justify-content: space-between; align-items: flex-end; z-index: 1}
  .sa-bizreal .kv .box-text { width: 65%; height: 550px; padding-top: 20px; z-index: 2}
  .sa-bizreal .kv h1 { margin-bottom: 25px; font-size: 1.11vw}
  .sa-bizreal .kv .label { justify-content: flex-start; margin-bottom: 30px}
  .sa-bizreal .kv .label li { max-width: 162px}
  .sa-bizreal .kv figure { display: flex; justify-content: flex-end; width: 45%; margin-right: -20%; z-index: 1}
  .sa-bizreal .kv figure img { max-width: 630px}
}
@media screen and (min-width: 990px) {
  .sa-bizreal .kv h1 { font-size: 2.2rem}
}
/* ----------------------
 .icon 
---------------------- */
.icon { margin: auto; color: #fff; text-align: center}
.icon.youtube { background: #da1725}
.icon.tiktok { background: #000}
/* ----------------------
 .sec-service
---------------------- */
.sec-service .text-lead { margin-top: -11px}
.sec-service .box-video div { width: 100%; aspect-ratio: 16/9}
.sec-service .box-video div iframe { width: 100%; height: 100%}
.sec-service .box-image { width: 100%}
.sec-service .box-image .ttl { margin-bottom: 15px; font-size: 1.4rem; text-align: center; font-weight: bold; line-height: 1.5}
@media screen and (max-width: 767px) {
  .sec-service .box-outline { flex-direction: column-reverse; margin-top: 34px}
  .sec-service .box-left { width: 55%}
  .sec-service .box-image { display: flex; justify-content: space-between; align-items: center; text-align: center}
  .sec-service .box-image figure { width: 40%}
  .sec-service .box-video { margin-bottom: 20px}
}
@media screen and (min-width: 768px) {
  .sec-service .text-lead { margin-top: -16px}
  .sec-service .box-outline { margin-top: 31px}
  .sec-service .box-video { width: 50%}
  .sec-service .box-image { width: 45%; padding: 20px 25px 5px; background: #eee}
  .sec-service .box-image .ttl { font-size: 1.8rem}
}
/* ----------------------
 .sec-worries
---------------------- */
.sec-worries { background: #da1716}
.sec-worries h2 { color: #fff}
.sec-worries ul { display: flex; justify-content: space-between; flex-wrap: wrap}
.sec-worries ul li { display: flex; justify-content: center; align-items: center; width: 49%; text-align: center; font-weight: 500; line-height: 1.5; background: #fff; border-radius: 8px}
@media screen and (max-width: 767px) {
  .sec-worries ul li { padding: 10px}
  .sec-worries ul li:nth-child(n + 3) { margin-top: 10px}
}
@media screen and (min-width: 768px) {
  .sec-worries ul li { width: 32%; min-height: 120px}
  .sec-worries ul li { font-size: 2.2rem}
  .sec-worries ul li:nth-child(n + 4) { margin-top: 25px}
}
/* ----------------------
 .sec−service
---------------------- */
.sec-point { background: #eee}
/* h3 */
.sec-point h3 { margin-bottom: 10px; padding: 0 20px; font-size: 2.0rem; font-weight: bold}
.sec-point h3 img { width: 20px; margin-right: 5px; vertical-align: baseline}
.sec-point .h3-after { padding: 0 20px}
.sec-point .h3-after .inner { padding: 8px 20px; color: #fff; font-size: 1.8rem; line-height: 1.3; background: #da1716}
.sec-point .block { padding: 0 0 46px}
.sec-point .block.point4 { padding: 0}
.sec-point .text-lead { margin-top: 19px}
/* point1 */
.point1-head { padding-top: 50px; text-align: center}
.point1-head figcaption { margin-top: 20px;  font-size: 16px; line-height: 1.5}
.sec-point .point1 .box-left, .sec-point .point1 .box-right { padding: 20px; background: #fff; border-radius: 8px}
.sec-point .point1 .icon { width: 200px; height: 40px; line-height: 40px; font-size: 20px}
.sec-point .point1 .fukidashi { margin: 10px 0 25px; text-align: center; font-weight: bold; font-size: 16px; letter-spacing: 0.1em}
.sec-point .point1 .fukidashi big { color: #da1716; font-size: 22px}
.sec-point .point1 .ttl { margin-bottom: 10px; font-size: 1.8rem; text-align: center; font-weight: 500; line-height: 1.5}
.sec-point .point1 .note { margin-top: 20px}
/* point2 */
.sec-point .box-onestop { margin-top: 20px; padding: 10px 15px 15px; color: #fff; text-align: center; background: #333; border-radius: 8px}
.sec-point .box-onestop .ttl { font-size: 1.8rem}
.sec-point .box-onestop ul { display: flex; justify-content: space-between; flex-wrap: wrap}
.sec-point .box-onestop ul li { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 90px; color: #000; background: #fff; overflow: hidden}
.sec-point .box-onestop ul li::before, .sec-point .box-onestop ul li::after { content: ""; position: absolute}
.sec-point .box-onestop ul li p { line-height: 1.3}
.sec-point .box-onestop ul li span { font-size: 2.0rem}
.sec-point .box-onestop ul li span::before { content: "■"; margin-right: 10px; color: #da1716; font-size: 1.0rem}
.sec-point .box-onestop ul li:nth-child(2) span::before { color: #ea6c30}
.sec-point .box-onestop ul li:nth-child(3) span::before { color: #539c38}
.sec-point .box-onestop ul li:nth-child(4) span::before { color: #037d80}
.sec-point .box-onestop ul li:nth-child(5) span::before { color: #0d61a1}
.sec-point .box-onestop ul li small { display: block; font-size: 10px}
/* point3 */
.sec-point .point3 ul { display: flex; justify-content: center; margin: 20px 0 0}
.sec-point .point3 ul li { padding: 15px 10px; font-size: 1.4rem; text-align: center; background: #fff; border-radius: 6px}
.sec-point .point3 ul li:first-child { margin-right: 10px}
.sec-point .point3 ul li p, .sec-point .point3 ul li figure { margin-bottom: 5px; font-weight: bold}
.sec-point .point3 ul li figure { width: 50%; margin: auto}
/* point4 */
.sec-point .box-case, .sec-case-study .box-case { margin-top: 30px; padding: 20px; text-align: center; background: #fff; border-radius: 8px}
.sec-point .box-case h4 { margin-bottom: 14px; font-size: 1.6rem; font-weight: 500; line-height: 1.3}
.sec-point .box-case h4 strong { color: #da1716}
.sec-point .ul-case { display: flex; justify-content: space-between; flex-wrap: wrap}
.sec-point .ul-case li { width: 100%; padding: 10px 15px; border: 2px solid #000; border-radius: 8px}
.sec-point .ul-case li .ttl { margin-bottom: 0; padding-bottom: 15px; font-size: 1.8rem; font-weight: 500; line-height: 1; border-bottom: 2.5px solid #da1716}
.sec-point .ul-case li .text-up { color: #da1716; font-size: 1.8rem}
.sec-point .ul-case li .text-up big { font-size: 3.6rem; font-weight: 500}
.sec-point .ul-case li .text-equation { margin-top: -6px; text-align: left; font-weight: 500; line-height: 1.8}
.sec-point .note { margin-top: 15px; text-align: left}
@media screen and (max-width: 767px) {
  .point1-head img { width: 50%}
  /* point1 */
  .sec-point .point1 .box-left, .sec-point .point1 .box-right {  margin-top: 30px}
  /* point2 */
  .sec-point .box-onestop .ttl { margin-bottom: 5px}
  .sec-point .box-onestop ul li::after { bottom: 10px; left: 50%; width: 30px; height: 30px; border: 1.5px solid #333;
    transform: translateX(-50%) scaleX(8) rotate(135deg); border-left: none; border-bottom: none}
  .sec-point .box-onestop ul li:last-child::after { border: none}
  .sec-point .box-onestop ul li:first-child { margin-top: 0; border-top-left-radius: 8px; border-top-right-radius: 8px}
  .sec-point .box-onestop ul li:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px}
  .sec-point .box-onestop ul li p { margin-top: -3%}
  /* point4 */
  .sec-point .ul-case li:nth-child(n + 2) { margin-top: 10px}
}
@media screen and (min-width: 768px) {
  .sec-point h3 { max-width: 1030px; margin: 0 auto 10px; font-size: 3.2rem}
  .sec-point h3 img { width: 30px; margin-right: 10px}
  .sec-point .block { padding: 0 0 76px}
  /* h3 */
  .sec-point .point1 .h3-after, .sec-point .point3 .h3-after { height: 60px; font-size: 2.8rem; text-align: center; background: linear-gradient(90deg, #eee 0%, #eee 50%, #da1716 50%, #da1716 100%)}
  .sec-point .point2 .h3-after, .sec-point .point4 .h3-after { height: 60px; font-size: 2.8rem; text-align: center; background: linear-gradient(90deg, #da1716 0%, #da1716 50%, #eee 50%, #eee 100%)}
  .sec-point .h3-after { background: #da1716}
  .sec-point .h3-after .inner { position: relative; display: flex; justify-content: center; align-items: center; height: 60px; font-size: 2.8rem}
  .sec-point .point1 .h3-after .inner::before,
  .sec-point .point3 .h3-after .inner::before { content: ""; position: absolute; top: 0; left: -10px; width: 30px; height: 60px; background: #da1716; transform:skewX(-15deg)}
  .sec-point .point2 .h3-after .inner::after,
  .sec-point .point4 .h3-after .inner::after { content: ""; position: absolute; top: 0; right: -10px; width: 30px; height: 60px; background: #da1716; transform:skewX(-15deg)}
  /* point1 */
  .point1-head figcaption { font-size: 18px}
  .sec-point .point1 .box-outline { margin-top: 49px}
  .sec-point .point1 .box-left, .sec-point .point1 .box-right { width: 49%; padding: 40px 20px 20px}
  .sec-point .point1 .ttl { font-size: 2.4rem}
  .sec-point .point1 dl dt, .sec-point .point1 dl dd { padding: 13px}
  /* point2 */
  .sec-point .box-onestop { margin-top: 40px; padding: 0 15px 12px}
  .sec-point .box-onestop .ttl { font-size: 2.4rem}
  .sec-point .box-onestop ul li { position: relative; width: 19%; height: 120px; background: #fff}
  .sec-point .box-onestop ul li:first-child { width: 24%; border-top-left-radius: 8px; border-bottom-left-radius: 8px}
  .sec-point .box-onestop ul li:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px}
  .sec-point .box-onestop ul li::after { top: 50%; right: -14px; width: 100px; height: 100px; border: 4px solid #333;
    transform: translateY(-50%) scaleX(0.5) rotate(45deg); border-left: none; border-bottom: none}
  .sec-point .box-onestop ul li:last-child::after { border: none}
  .sec-point .box-onestop ul li p { margin-left: -15%}
  /* point3 */
  .sec-point .point3 ul { margin: 40px 0 0}
  .sec-point .point3 ul li p, .sec-point .point3 ul li figure { margin-bottom: 15px; font-size: 2.0rem}
  /* point4 */
  .sec-point .box-case, .sec-case-study .box-case { margin-top: 40px; padding: 35px 40px}
  .sec-point .box-case h4 { margin-bottom: 30px; font-size: 3.2rem}
  .sec-point .ul-case li { width: 32%; padding: 20px 15px}
  .sec-point .ul-case li .ttl { margin-bottom: -30px; font-size: 2.2rem}
  .sec-point .ul-case li .text-up { font-size: 3.535vw}
  .sec-point .ul-case li .text-up big { margin-right: 3px; font-size: 9.090vw}
}
@media screen and (min-width: 990px) {
  .sec-point .ul-case li .text-up { font-size: 3.5rem}
  .sec-point .ul-case li .text-up big { font-size: 9.0rem}
}
/* ----------------------
 .sec-case-study
---------------------- */
.sec-case-study { background: #da1716}
.sec-case-study h2 { color: #fff}
.sec-case-study h3 { margin-bottom: 10px; font-size: 1.8rem}
.sec-case-study .box-outline { text-align: left}
.sec-case-study .box-image { width: 100%}
.sec-case-study .box-image div { width: 100%; aspect-ratio: 16/9}
.sec-case-study .box-image div iframe { width: 100%; height: 100%}
.sec-case-study dl dt { width: 100%; margin-bottom: 10px; padding-left: 10px; font-size: 2.0rem; font-weight: bold; line-height: 1.8; border-left: 5px solid #000; border-bottom: 1px solid #000}
.sec-case-study dl dd { margin-bottom: 20px; line-height: 1.8}
.sec-case-study .box-image p { margin-top: 10px}
.sec-case-study .box-image .name { font-size: 1.6rem; font-weight: bold}
.sec-case-study .icon { display: inline-block; margin-bottom: 3px; padding: 5px 7px; font-size: 12px}
.sec-case-study .icon.signage { background: #dc000c}

.sec-case-study .box-image figure { margin-top: 20px}
.sec-case-study .box-image figcaption { display: flex; align-content: flex-start}
.sec-case-study .box-image figcaption div { width: 50%; height: 25px}
.sec-case-study .box-image figcaption div:nth-of-type(2) { padding-left: 7px}
@media screen and (max-width: 767px) {
  .sec-case-study h3 { font-weight: bold}
  .sec-case-study .box-image p { margin-bottom: 20px}
}
@media screen and (min-width: 768px) {
  .sec-case-study h3 { margin-bottom: 40px; font-size: 3.2rem}
  .sec-case-study .box-image { width: 45%}
  .sec-case-study .box-image .name { font-size: 1.8rem}
  .sec-case-study .box-text { width: 52%}
}
/* ----------------------
 .sec-flow
---------------------- */
.sec-flow { background: #eee url(../img/bg-sec-flow-sp.jpg)no-repeat center top/100% auto}
.sec-flow h2 { color: #fff}
.sec-flow .sub-text { margin-bottom: 20px; color: #fff; font-size: 1.6rem; text-align: center}
.sec-flow .ul-flow { display: flex; justify-content: space-between; flex-wrap: wrap}
.sec-flow .ul-flow li { width: 100%; padding: 0 20px 10px; background: #fff}
.sec-flow .ul-flow li span { display: block; width: 75px; height: 30px; line-height: 30px;margin: auto; color: #fff; text-align: center; background: #da1716}
.sec-flow .ul-flow li .ttl { margin: 10px 0 5px; color: #da1716; font-size: 1.6rem; font-weight: bold; text-align: center}
.sec-flow .box-onestop { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; margin-top: 30px}
.sec-flow .box-onestop .box-text { width: 100%; font-size: 1.6rem; font-weight: bold; line-height: 1.8}
.sec-flow .box-onestop figure { width: 200px}
@media screen and (max-width: 767px) {
  .sec-flow .ul-flow li { text-align: center}
  .sec-flow .ul-flow li:nth-child(n + 2) { margin-top: 10px}
  .sec-flow .box-onestop .box-text { margin-top: 10px; text-align: center}
  .sec-flow .box-onestop figure { width: 200px; margin: auto}
}
@media screen and (min-width: 768px) {
  .sec-flow { background-image: url(../img/bg-sec-flow-pc.jpg)}
  .sec-flow .sub-text { margin-bottom: 30px; font-size: 2.0rem}
  .sec-flow .ul-flow li { width: 19%; padding: 0 15px 15px}
  .sec-flow .box-onestop { max-width: 800px; margin: 50px auto 0}
  .sec-flow .box-onestop .box-text { width: calc(100% - 230px); font-size: 1.8rem}
}
/* ----------------------
 .sec-plan
---------------------- */
section.sec-plan { padding-top: 0; background: #eee}
.sec-plan table { width: 100%; vertical-align: middle; font-size: 1.8rem; line-height: 1.8}
.sec-plan thead th { width: 25%; padding: 15px; color: #fff; text-align: center; background: #333; border: 1px solid #999}
.sec-plan tbody th, .sec-plan tbody td { padding: 15px; font-weight: bold; background: #fff; border: 1px solid #999}
.sec-plan tbody td.td-effect { font-size: 1.6rem; line-height: 1.3}
.sec-plan tbody td.td-effect span { color: #da1716}
.sec-plan tbody td.td-effect .note { color: #000; font-weight: normal}
.sec-plan .note { margin-top: 40px; font-size: 1.4rem}
.sec-plan .note li span { color: #da1716}
@media screen and (max-width: 767px) {
  .sec-plan thead th { display: none}
  .sec-plan tbody th, .sec-plan tbody td { display: flex; justify-content: flex-start; align-items: center; width: 100%; border-top: none}
  .sec-plan tbody th:first-of-type { border-top: 1px solid #999}
  .sec-plan tbody td:last-of-type { margin-bottom: 20px}
  .sec-plan tbody th .item, .sec-plan tbody td .item { width: 90px; margin-right: 20px; padding: 5px 10px; color: #fff; font-size: 1.4rem; text-align: center; background: #333}
}
@media screen and (min-width: 768px) {
  .sec-plan tbody th, .sec-plan tbody td { text-align: center}
  .sec-plan tbody th .item, .sec-plan tbody td .item { display: none}
}

/* flow plan　共通*/
.sa-bizreal .ul-note { margin-top: 10px; line-height: 2}
.sa-bizreal .ul-note li { padding-left: 1.5em}
.sa-bizreal .ul-note li::before { content: "■"; margin-right: 5px; margin-left: -1.5em; color: #da1716}
@media screen and (min-width: 768px) {
  .sa-bizreal .ul-note { margin-top: 50px; line-height: 1.8}
  .sa-bizreal .ul-note + .ul-note { margin-top: 10px}
}
/* ----------------------
 .sec-faq
---------------------- */
.sec-faq { padding-bottom: 0}
.sec-faq .accordion { margin-bottom: 20px; border: 1px solid #000}
.sec-faq .accordion:last-of-type { margin-bottom: 0}
.sec-faq .toggle { display: none}
.sec-faq .box-faq { position: relative}
.sec-faq .question { font-size: 1.6rem; font-weight: 500}
.sec-faq .question, .sec-faq .answer { backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s}
.sec-faq .question { display: block; padding: 15px 40px}
.sec-faq .question::after, .sec-faq .question::before { content: ""; position: absolute; right: 1.25em; top: 45%; width: 3px; height: 1em; background-color: #da1716; transition: all 0.3s}
.sec-faq .question::after { transform: rotate(90deg)}
.sec-faq .answer { max-height: 0; overflow: hidden}
.sec-faq .answer-inr { padding: 15px}
.sec-faq .answer .lead { margin-bottom: 30px!important; padding-bottom: 30px; font-size: 16px; font-weight: 500; border-bottom: 1px dashed #ddd}
.sec-faq .toggle:checked + .question { color: #fff; background: #da1716}
.sec-faq .toggle:checked + .question + .answer { max-height: 500px; transition: all 1.5s}
.sec-faq .toggle:checked + .question::before { transform: rotate(90deg) !important}
.sec-faq .toggle:checked + .question::after {background-color: #fff}
.sec-faq .ic-q { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; color: #da1716; font-size: 2.1rem; font-style: normal; font-weight: normal}
.sec-faq .ic-a { display: inline-block; width: 40px; height: 40px; line-height: 36px; margin-right: 10px; color: #fff; font-size: 30px; font-style: normal; text-align: center; background: #da1716; border-radius: 40px}
@media print, (min-width: 768px) { 
  .sec-faq .question { padding: 20px 40px}
  .sec-faq .question::after, .sec-faq .question::before { right: 1.25em; top: 1.25em}
  .sec-faq .answer-inr { padding: 30px}
}
/* ----------------------
 .pr-area
---------------------- */
.pr-area { width: 100%; max-width: 860px; margin: 0 auto 100px; padding: 0}
/* ----------------------
 .fixed-cta
---------------------- */
.fixed-cta { position: fixed; left: 0; bottom: 0; display: flex; align-items: center; flex-direction: column; width: 100%; padding: 10px 0; color: #fff; text-align: center; background: rgba(0,0,0,0.8); z-index: 999}
.fixed-cta.is-hidden { visibility: hidden; opacity: 0}
.fixed-cta .text { margin-bottom: 10px; ont-size: 1.6rem}
.fixed-cta .text small { font-size: 1.4rem}
.fixed-cta a { display: flex; justify-content: center; align-items: center; height: 50px; margin: auto; color: #fff; font-size: 1.8rem; background: #da1716 url(../img/icon-mail.png) no-repeat left 20px center/24px auto; border-radius: 4px}
@media print, (min-width: 768px) { 
  .fixed-cta { height: 200px}
  .fixed-cta .text { margin-bottom: 20px; font-size: 2.0rem}
  .fixed-cta a { max-width: 450px; height:  60px; background-position: left 55px center; background-size: 40px auto}
}
/* ----------------------
 footer
---------------------- */
footer { height: 50px; line-height: 50px; color: #fff; font-size: 1.2rem; text-align: center; background: #000}