@charset "UTF-8";
/* COMMON STYLE */
.sa-pro { color: #000;}
.sa-pro a:hover { color: #7b0000; opacity: 0.8;}
.sa-pro sub { font-size: 10px;}
.sa-pro figure { margin: 0;}
.sa-pro h2, .sa-pro h3 { margin-bottom: 30px; font-size: 18px!important; line-height: 1.5!important;}
.sa-pro h2 img { width: 180px; margin-right: 10px;}
.sa-pro h3 { text-align: center;}
.sa-pro h3 big {  font-size: 22px!important;}
.sa-pro h3 span { color: #7b0000;}
.sa-pro .text-deco-line { color: #000;}
.sa-pro .notes { color: #666; font-size: 12px!important;}
.sa-pro .button-top { margin-bottom: 10px; text-align: center;}
.sa-pro .button-top img { width: 755px;}

.sa-pro .contents-inr { padding: 40px 20px!important}
@media screen and (max-width: 767px) {
  .sa-pro .button-top { padding: 0 20px;}
}
@media screen and (min-width: 768px) {
  .sa-pro h2, .sa-pro h3 { font-size: 30px!important; font-weight: normal;}
  .sa-pro h2 img { width: 250px;}
  .sa-pro h3 { font-size: 30px!important; font-weight: normal;}
  .sa-pro h3 big { font-size: 40px!important; font-weight: normal;}  
  .sa-pro .notes { font-size: 10px!important;}
  .sa-pro .button-top { margin: 0 auto 20px;}
  
  .sa-pro .contents-inr { padding: 40px 20px 80px!important}
}
/* .mv */
.sa-pro .mv .contents-inr { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; padding: 0!important;}
.sa-pro .mv .box-left, .sa-pro .mv .box-right { width: 100%;}
.sa-pro .mv .box-left { background: #fff;}
.sa-pro .mv .mv-logo { width: 70%; margin: 10px auto 0;}
.sa-pro .mv .box-left h1 { font-size: 15px; font-weight: bold; line-height: 1.5;}
.sa-pro .logo-top, .sa-pro .mv .point-text  { color: #7b0000; font-size: 20px; font-weight: bold;}
.sa-pro .mv .point-text big { font-size: 30px;}
.sa-pro .logo-top { margin-top: -10px!important; font-size: 15px;}
.sa-pro .mv ul { display: flex; justify-content: space-between; margin: 20px 0 10px!important;}
.sa-pro .mv ul li { color: #7b0000; width: 32.5%; font-size: 2.323vw; text-align: center; font-weight: bold; line-height: 1.3;}
.sa-pro .mv ul li small { display: block; font-size: 10px; font-weight: normal;}
.sa-pro .mv ul li span:after  { margin-left: 2px; font-size: 15px;}
.sa-pro .mv ul li:nth-child(1) span:after { content: "社";}
.sa-pro .mv ul li:nth-child(2) span:after { content: "件";}
@media screen and (max-width: 767px) {
  .sa-pro .mv .box-left { padding: 20px!important; text-align: center;}
  .sa-pro .mv .notes { text-align: left;}
  .sa-pro .mv ul li { padding: 10px 5px; font-size: 4vw; border: 2.5px solid #7b0000;}
  .sa-pro .mv .box-right { overflow: hidden; display: flex; justify-content: center;}
  .sa-pro .mv .box-right img { max-width: 120%!important; margin-left: -12%}
}
@media screen and (min-width: 768px) {
  .sa-pro .mv { background:  url(../img/sa-pro/img-mv-01-pc.jpg) no-repeat top center/cover;}
  .sa-pro .mv .contents-inr { align-items: center; height: 430px;}
  .sa-pro .mv .box-left { position: relative; width: 43%; height: 100%; z-index: 1;}
  .sa-pro .mv .box-left:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -30px; background: #fff; transform: skewX(-10deg); z-index: -1;}
  .sa-pro .mv .box-left h1 { margin: 40px 0 0 -0.5em;}
  .sa-pro .logo-top { font-size: 15px;}
  .sa-pro .mv ul { margin: 30px 0 20px!important;}
  .sa-pro .mv ul li { padding-bottom: 5px; border-bottom: 2.5px solid #7b0000;}
  .sa-pro .mv ul li small { font-size: 12px;}
  .sa-pro .mv .mv-logo { max-width: 351px; margin: 10px 0 0;}
  .sa-pro .mv .box-right { position: relative; width: 53%; height: 430px}
  .sa-pro .mv .box-right .badge { position: absolute; bottom: 70px; right: 20px; max-width: 325px}
}
@media screen and (min-width: 1030px) {
  .sa-pro .mv ul li { font-size: 25px;}
}
/* video */
.sa-pro .video-area { background: #faf8f3;}
.sa-pro .video-area .contents-inr { padding-bottom: 0!important;}
.sa-pro .video-area .box-outline { display: flex; justify-content: space-between; flex-wrap: wrap;}
.sa-pro .video-area .box-text .ttl { margin-top: 10px!important; color: #7b0000; font-size: 20px;}
.sa-pro .video-area .box-text p { margin-bottom: 1em!important}
@media screen and (max-width: 767px) {
  .sa-pro .video-area .box-text { width: 100%; text-align: center;}
}
@media screen and (min-width: 768px) {
  .sa-pro .video-area { padding: 40px 0 0;}
  .sa-pro .video-area .contents-inr { padding-bottom: 40px!important;}
  .sa-pro .video-area .video-wrap { width: 49%; max-width: 475px; margin: 0;}
  .sa-pro .video-area .box-text { width: 49%; font-size: 14px;}
  .sa-pro .video-area .box-text .ttl { margin-bottom: 14px!important; font-size: 26px;}
}
/* .sec-motive */
.sa-pro .sec-motive { background: #faf8f3;}
.sa-pro .sec-motive .box-outline { display: flex; justify-content: space-between; flex-wrap: wrap;}
.sa-pro .sec-motive .box-left { text-align: center;}
.sa-pro .sec-motive .box-left .logo { width: 65%;}
.sa-pro .sec-motive .box-right .ttl { margin-bottom: 30px!important; font-weight: bold; text-align: center; line-height: 1.3!important;}
.sa-pro .sec-motive .box-right .ttl span { margin-left: 10px; color: #287e9b; font-size: 38px;}
.sa-pro .sec-motive .box-right .ttl strong { font-size: 17px;}
.sa-pro .sec-motive .box-right .text { margin-bottom: 20px!important; font-weight: bold;}
.sa-pro .sec-motive .box-right .graph { margin: 20px auto 10px;}

.sa-pro .sec-motive .box-point { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px; padding: 20px; font-size: 14px; border: 2px solid #000; border-radius: 12px;}
.sa-pro .sec-motive .box-point figure { max-width: 100px;}
.sa-pro .sec-motive + .button-top { margin-bottom: 0; padding-bottom: 10px; background: #faf8f3;}
@media screen and (max-width: 767px) {
  .sa-pro .sec-motive .box-left .website { width: 85%;}
  .sa-pro .sec-motive .box-right { margin-top: 30px;}
  .sa-pro .sec-motive .box-right .text { margin-bottom: 30px!important; line-height: 1.3!important;}
  .sa-pro .sec-motive .box-point figure { margin: 0 auto 20px;}
}
@media screen and (min-width: 768px) {
  .sa-pro .sec-motive .box-left { width: 44%;}
  .sa-pro .sec-motive .box-left .logo { width: 200px;}
  .sa-pro .sec-motive .box-left p { margin: 5px 0!important;}
  .sa-pro .sec-motive .box-right { width: 50%;}
  .sa-pro .sec-motive .box-right .ttl { font-size: 18px;}
  .sa-pro .sec-motive .box-right .ttl strong { font-size: 30px;}
  .sa-pro .sec-motive .box-point { align-items: center; padding: 20px 40px;}
  .sa-pro .sec-motive .box-point figure { max-width: 130px;}
  .sa-pro .sec-motive .box-point .box-text { width: calc(100% - 160px);}
  .sa-pro .sec-motive .box-point .ttl  { font-size: 23px; font-weight: bold;} 
}
/* .material-area */
.sa-pro .material-area { padding: 26px 0; color: #fff; background: linear-gradient(to bottom,  #3c0101 50%, #7b0000 100%);}
.sa-pro .material-area .contents-inr { display: flex; justify-content: center; flex-direction: row-reverse; flex-wrap: wrap; padding: 0 20px!important;}
.sa-pro .material-area .box-left { text-align: center;}
.sa-pro .material-area .box-left img { width: 80%;}
.sa-pro .material-area a { position: relative; display: flex; justify-content: center; align-items: center; width: 300px; height: 50px; margin: 20px auto 0; color: #7b0000; font-size: 18px; font-weight: 500; background: #fff; border-radius: 50px;}
.sa-pro .material-area .text-right { margin: 10px 0 20px!important; font-size: 12px; text-align: center;}
.sa-pro .material-area .arrow-right::after {  content: "";  position: absolute;  margin: auto;  top: 0;  bottom: 0;  right: 20px;  width: 15px;  height: 15px;  border: 4px solid;  border-color:  #7b0000 #7b0000 transparent transparent;  transform: rotate(45deg);}
@media screen and (min-width: 768px) {
  .sa-pro .material-area .box-left { width: 40%; text-align: center;}
  .sa-pro .material-area .box-left img { width: 304px; margin-bottom: 15px;}
  .sa-pro .material-area .box-right { width: 45.5%; max-width: 451px;}
  .sa-pro .material-area .text-right { margin: 10px 0 0!important; text-align: right;}
}
/* .anchor-link */
.sa-pro .anchor-link { display: flex; justify-content: space-between; flex-wrap: wrap;}
.sa-pro .anchor-link li { width: 49%;}
.sa-pro .anchor-link li a { position: relative; display: flex; justify-content: center; align-items: center; height: 45px; padding-right: 10px; color: #fff; font-size: 11px; background: #000; border-radius: 4px;}
.sa-pro .anchor-link li a:hover .arrow-down::before { background: #fff; border: none;}
.sa-pro .arrow-down::before {  content: "";  position: absolute;  margin: auto;  top: 0;  bottom: 0;  right: 5px;  width: 20px;  height: 20px;  border: 1px solid #fff;  border-radius: 50%;}
.sa-pro .arrow-down::after {  content: "";  position: absolute;  margin: auto;  top: -4px;  bottom: 0;  right: 11px;  width: 8px;  height: 8px;  border: 2px solid;  border-color:  transparent transparent #fff #fff;  transform: rotate(-45deg);}
.sa-pro .anchor-link li a:hover .arrow-down::after { border-color:  transparent transparent #7b0000 #7b0000;  transform: rotate(-45deg);}
@media screen and (max-width: 767px) {
  .sa-pro .anchor-link li:nth-child(n + 3) { margin-top: 6px;}
}
@media screen and (min-width: 768px) {
  .sa-pro .anchor-link li { width: 24.5%;}
  .sa-pro .anchor-link li a { font-size: 16px;}
  .sa-pro .anchor-link li a:hover { opacity: 1;}
  .sa-pro .arrow-down::before { right: 10px;  width: 30px;  height: 30px;}
  .sa-pro .arrow-down::after { right: 20px;  width: 10px;  height: 10px;}
}
/* .sec-strength */
.sa-pro .sec-strength { overflow: hidden;}
.sa-pro .ttl-box-right, .sa-pro .ttl-box-left { position: relative; width: 100%; height: auto;}
.sa-pro .ttl-box-right:before, .sa-pro .ttl-box-left:before { position: absolute; content: ""; width: 50%; height: auto; border-top: 2px solid #000; border-bottom: 2px solid #000; right: 0; bottom: 0;}
.sa-pro .ttl-box-left:before { left: 0; bottom: 0;}
.sa-pro .ttl-box-right-inr, .sa-pro .ttl-box-left-inr { position: relative; display: flex; align-items: center; max-width: 1030px; height: auto; padding: 15px 20px; margin: auto; z-index: 1; font-size: 18px; font-weight: bold; line-height: 1.3;}
.sa-pro .ttl-box-right-inr:before, .sa-pro .ttl-box-left-inr:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -30px; background: #fff; transform: skewX(-10deg); z-index: -1; border-left: 2px solid #000; border-top: 2px solid #000; border-bottom: 2px solid #000;}
.sa-pro .ttl-box-left-inr:after { right: 0; left: -30px; border-left: none; border-right: 2px solid #000;}
.sa-pro .ttl-box-right-inr i, .sa-pro .ttl-box-left-inr i { margin-right: 10px; color: #7b0000; font-size: 30px; font-weight: normal;}
.sa-pro .sec-strength .box-outline,
.sa-pro .sec-strength .box-inr-outline { display: flex; justify-content: space-between; flex-wrap: wrap;}
.sa-pro .sec-strength .ul-occupation { display: flex; justify-content: center; flex-wrap: wrap; margin: 30px 0 40px!important;}
.sa-pro .sec-strength .ul-occupation li { width: 19%; color: #340000; text-align: center; font-weight: bold;}
.sa-pro .sec-strength .ul-occupation li figure { margin-top: 5px;}
.sa-pro .sec-strength .ul-occupation li figure img { border: 1px solid #340000; border-radius: 6px;}
.sa-pro .sec-strength .ul-example li { width: 48%; font-size: 14px;}
.sa-pro .sec-strength .ul-example li strong { display: block; width: 100%;  margin: 20px 0 10px; font-size: 16px; text-align: center;}
.sa-pro .sec-strength .ul-example li img { border-radius: 8px;}
.sa-pro .sec-strength .point-text { color: #340000; font-size: 18px; text-align: center; font-weight: bold;}
.sa-pro .sec-strength .box-outline.one .notes { text-align: center;}
.sa-pro .sec-strength .box-outline.two { margin-top: 30px;}
.sa-pro .sec-strength .box-outline.two .ttl,
.sa-pro .sec-strength .box-outline.three .ttl { position: relative; margin-bottom: 30px!important; color: #fff; font-size: 16px; text-align: center; z-index: 1;}
.sa-pro .sec-strength .box-outline.two .ttl:after,
.sa-pro .sec-strength .box-outline.three .ttl:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #7b0000; transform: skewX(-10deg); z-index: -1;}
.sa-pro .sec-strength .box-inr-outline { width: 90%; margin: auto;}
.sa-pro .sec-strength .box-inr-outline figure { width: 48%;}
.sa-pro .sec-strength .box-inr-outline dl { width: 50%;}
.sa-pro .sec-strength .box-inr-outline dl dt { float: left; width: 30px; margin-top: 10px; padding: 10px 0 0; color: #7b0000; font-size: 20px;}
.sa-pro .sec-strength .box-inr-outline dl dd { margin: 10px 0 0 30px; padding: 10px; border: 1px solid #999;}
.sa-pro .sec-strength .box-inr-outline dl dt:nth-of-type(n + 3) { clear: left;}
.sa-pro .sec-strength .box-outline.three { font-size: 14px;}
.sa-pro .sec-strength .box-outline.three .box:first-of-type figure { width: 80%; margin: 40px auto 0;}
.sa-pro .sec-strength .box-outline.three .text:nth-of-type(n + 2){ margin-top: 10px!important;}
.sa-pro .sec-strength .box-outline.three .box-m-kobot { display: flex; justify-content: space-between; margin-top: 40px;}
.sa-pro .sec-strength .box-outline.three .box-m-kobot figure { width: 40%;}
.sa-pro .sec-strength .box-outline.three .box-m-kobot .box-text { width: 50%;}
.sa-pro .sec-strength .box-outline.three .box-m-kobot .box-text figure { width: 65%!important; margin: auto;}
.sa-pro .sec-strength .box-outline.three .box-m-kobot .box-text p { margin-bottom: 10px!important; font-size: 12px;}
.sa-pro .sec-strength .box-outline.four { margin: 30px 0 40px;}
.sa-pro .sec-strength .box-inr-outline .box-text { width: 44%; font-size: 12px; text-align: center;}
.sa-pro .sec-strength .box-inr-outline .box-text img { width: 150px;}
.sa-pro .sec-strength .box-inr-outline .box-text p { margin-bottom: 20px!important; text-align: left;}
.sa-pro .sec-strength .ul-support { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30px!important;}
.sa-pro .sec-strength .ul-support + p { font-size: 14px;}
.sa-pro .sec-strength .ul-support li { position: relative; display: flex; align-items: center;  text-align: center; width: 49%; min-height: 70px; padding: 0 10px 0 50px; color: #7b0000; font-weight: bold; line-height: 1.3; border: 3px solid #7b0000;}
.sa-pro .sec-strength .ul-support li:nth-child(n + 3) { margin-top: 10px;}
.sa-pro .sec-strength .box-outline.four strong { background:linear-gradient(transparent 60%, #d7b2b2 60%);}
.sec-strength .ul-example { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 30px!important;}
.sa-pro .sec-strength .icon-graph01, .sa-pro .sec-strength .icon-graph02, .sa-pro .sec-strength .icon-manuscript, .sa-pro .sec-strength .icon-camera, .sa-pro .sec-strength .icon-interview { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; width: 30px; height: 30px;}
.sa-pro .sec-strength .icon-graph01 { background: url(../img/sa-pro/img-strength04-02.png) no-repeat center left/auto 30px;}
.sa-pro .sec-strength .icon-manuscript { background: url(../img/sa-pro/img-strength04-03.png) no-repeat center left/auto 30px;}
.sa-pro .sec-strength .icon-camera { background: url(../img/sa-pro/img-strength04-04.png) no-repeat center left/auto 30px;}
.sa-pro .sec-strength .icon-graph02 { background: url(../img/sa-pro/img-strength04-05.png) no-repeat center left/auto 30px;}
.sa-pro .sec-strength .icon-interview { background: url(../img/sa-pro/img-strength04-06.png) no-repeat center left/auto 30px;}
@media screen and (max-width: 767px) {
  .sa-pro .ttl-box-right-inr { margin-left: 20px;}
  .sa-pro .ttl-box-left-inr { margin-right: 20px;}
  .sa-pro .sec-strength .ul-occupation li { margin-right: 1.25%;}
  .sa-pro .sec-strength .ul-occupation li:last-child { margin-right: 0;}
  .sa-pro .sec-strength .ul-occupation li:nth-child(5) { margin-right: 0;}
  .sa-pro .sec-strength .ul-occupation li:nth-child(n + 6) { margin-top: 10px;}
  .sa-pro .sec-strength .ul-example li:nth-child(n + 3) { margin-top: 30px;}
  .sa-pro .sec-strength .box-outline.one .box-image { margin: 20px auto 0; text-align: center;}
  .sa-pro .sec-strength .box-outline.one .box-image img { width: 80%!important;}
  .sa-pro .sec-strength .box-outline.two .box:nth-of-type(n + 2),
  .sa-pro .sec-strength .box-outline.three .box:nth-of-type(n + 2) { margin-top: 40px;}
  .sa-pro .sec-strength .box-outline.four .box-image { margin-top: 30px; text-align: center;}
  .sa-pro .sec-strength .box-outline.four .box-image img { width: 50%!important;}
}
@media screen and (min-width: 768px) {
  .sa-pro .ttl-box-right, .sa-pro .ttl-box-left { height: 80px;}
  .sa-pro .ttl-box-right:before, .sa-pro .ttl-box-left:before { height: 80px;}
  .sa-pro .ttl-box-right-inr, .sa-pro .ttl-box-left-inr { align-items: flex-end; height: 80px; padding: 15px 20px; font-size: 25px;}
  .sa-pro .ttl-box-right-inr i, .sa-pro .ttl-box-left-inr i { margin-bottom: -10px; font-size: 60px;}
  .sa-pro .sec-strength .point-text { font-size: 23px;}
  .sa-pro .sec-strength .box-outline.one .notes { margin-top: 10px!important;}
  .sa-pro .sec-strength .box-outline.one .box-text { width: calc(65% - 40px);}
  .sa-pro .sec-strength .box-outline.one .box-image { width: 35%;}
  .sa-pro .sec-strength .ul-occupation { justify-content: space-between;}
  .sa-pro .sec-strength .ul-occupation li { width: 10%;}
  .sa-pro .sec-strength .ul-occupation li figure { margin-top: 10px;}
  .sa-pro .sec-strength .ul-occupation li figure img { border-width: 2px}
  .sa-pro .sec-strength .ul-example li { width: 24%;}
  .sa-pro .sec-strength .box-outline.two .box,
  .sa-pro .sec-strength .box-outline.three .box { width: 45%;}
  .sa-pro .sec-strength .box-outline.two .box:nth-of-type(n + 3) { margin-top: 40px;}
  .sa-pro .sec-strength .box-outline.four .box-text { width: calc(75% - 90px);}
  .sa-pro .sec-strength .box-outline.four .box-image { width: 25%;}
  .sa-pro .sec-strength .ul-support li { padding: 0 10px 0 60px;}
  .sa-pro .sec-strength .icon-graph01, .sa-pro .sec-strength .icon-graph02, .sa-pro .sec-strength .icon-manuscript, .sa-pro .sec-strength .icon-camera, .sa-pro .sec-strength .icon-interview { width: 40px; height: 40px;}
  .sa-pro .sec-strength .icon-graph01, .sa-pro .sec-strength .icon-manuscript, .sa-pro .sec-strength .icon-camera, .sa-pro .sec-strength .icon-graph02, .sa-pro .sec-strength .icon-interview { background-size: auto 40px;}
}
/* .sec-plan */
.sa-pro .sec-plan .text { margin: 30px 0!important; font-weight: bold; text-align: center;}
.sa-pro .ul-square { clear: left; margin: 0 0 0 0.5em!important;}
.sa-pro .ul-square li { padding-left: 1em; line-height: 1.8;}
.sa-pro .ul-square li:before { content: "■"; margin: 0 10px 0 -1.5em; color: #7b0000;}
.sa-pro .ul-square.big { width: fit-content; margin: 25px auto 30px!important; font-size: 14px;}
.sa-pro .ul-square.small { font-size: 13px;}
.sa-pro .box-plan { padding: 20px; border: 1.5px solid #340000; border-radius: 8px;}
.sa-pro .box-plan dl dt { float: left; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; color: #7b0000; font-size: 25px; border: 1.5px solid #7b0000;}
.sa-pro .box-plan dl dd { padding-left: 75px;}
.sa-pro .box-plan dl dd .plan { margin-top: -15px!important; color: #7b0000; font-size: 44px;}
.sa-pro .box-plan dl dd .plan:after { content: "円"; margin-left: 10px; color: #000; font-size: 20px;}
.sa-pro .box-plan .box-outline, .sa-pro .box-plan .box-image ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
.sa-pro .box-plan .ttl {position: relative; color: #fff; text-align: center; z-index: 1;}
.sa-pro .box-plan .ttl:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #340000; transform: skewX(-10deg); z-index: -1;}
.sa-pro .box-plan a { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 350px; height: 50px; margin: 40px auto 0; color: #fff; background: #7b0000; border-radius: 50px;}
.sa-pro .box-plan .box-image { padding: 20px 10px; background: #efece8; border-radius: 8px;}
.sa-pro .box-plan .box-image ul li { width: 100%; color: #7b0000; font-size: 14px; text-align: center; background: #fff; border: 1px solid #7b0000;}
.sa-pro .box-plan .box-image ul li figure { width: 80%; margin: 10px auto 5px!important;}
.sa-pro .box-plan .box-image ul li:nth-child(n + 2) { margin-top: 15px;}
.sa-pro .box-plan .box-image ul li span { display: flex; justify-content: center; align-items: center; width: 100%; padding: 5px 10px; color: #fff; font-size: 12px; background: #7b0000;}
.sa-pro .box-plan .box-image ul li.baitoru,
.sa-pro .box-plan .box-image ul li.m-kobot { width: 49%;}
.sa-pro .box-plan .box-image ul li.baitoru { color: #c70f0f; border-color: #c70f0f;}
.sa-pro .box-plan .box-image ul li.baitoru span { background-color: #c70f0f;}
.sa-pro .box-plan .box-image ul li.m-kobot { color: #009bdc; border-color: #009bdc;}
.sa-pro .box-plan .box-image ul li.m-kobot span { background-color: #009bdc;}
.sa-pro .box-plan .box-image ul li.baitoru figure { max-width: 100px;}
.sa-pro .box-plan .box-image ul li.m-kobot figure { max-width: 151px;}
@media screen and (max-width: 767px) {
  .sa-pro .box-plan .box-image { margin-top: 20px;}
  .sa-pro .box-plan .box-image ul li.baitoru span,
  .sa-pro .box-plan .box-image ul li.m-kobot span { min-height: 3em;}
  .sa-pro .box-plan a.pc-only { display: none;}
}
@media screen and (min-width: 768px) {
  .sa-pro .box-plan { padding: 30px;}
  .sa-pro .sec-plan .text { font-size: 20px;}
  .sa-pro .box-plan a { width: 90%;}
  .sa-pro .box-plan a.sp-only { display: none;}
  .sa-pro .box-plan .box-text { width: 48%;}
  .sa-pro .box-plan dl dt { width: 75px; height: 75px;}
  .sa-pro .box-plan dl dd { padding-left: 95px;}
  .sa-pro .box-plan dl dd .plan { font-size: 50px;}
  .sa-pro .box-plan dl dd .plan:after { font-size: 25px;}
  .sa-pro .box-plan .box-image { width: 48%; padding: 30px 25px;}
  .sa-pro .box-plan .box-image ul li figure { max-width: 250px; margin: auto;}
}
/* .sec-example */
.sa-pro .sec-example { padding: 40px 0;}
.sa-pro .box-example { margin: 0 30px; padding: 20px; font-size: 14px; border: 1.5px solid #7b0000; border-radius: 12px;}
.sa-pro .box-example .ttl { margin-bottom: 22px!important; padding-bottom: 10px; font-size: 18px; font-weight: 700; text-align: center; border-bottom: 1.5px solid #7b0000;}
.sa-pro .sec-example .dead { clear: both; width: 100%;}
.sa-pro .sec-example .dead .float { display: flex; align-items: center; flex-wrap: wrap;}
.sa-pro .sec-example .dead dl { margin: 20px 0; line-height: 1.8}
.sa-pro .sec-example .dead dl dt { position: relative; width: 5em; float: left;} 
.sa-pro .sec-example .dead dl dt:after { content: "："; position: absolute; right: 0;}
.sa-pro .sec-example .dead dl dd { padding-left: 5em;}
.sa-pro .sec-example .dead dl dd span { font-size: 12px; white-space: nowrap}
.sa-pro .sec-example .excerpt { display: flex; justify-content: space-between; flex-wrap: wrap;}
.sa-pro .sec-example .excerpt dl { line-height: 1.5;}
.sa-pro .sec-example .excerpt dl dt { color: #7b0000; font-weight: bold;}
.sa-pro .sec-example .excerpt dl dd:first-of-type { margin-bottom: 20px!important;}
.sa-pro .sec-example .company-logo { width: auto!important; height: 30px!important; margin-right: 10px;}
.sa-pro .sec-example .company-name { font-size: 16px; font-weight: 500;}
.sa-pro .sec-example .box-link02  { display: flex; justify-content: center; align-items: center; width: 200px; height: 40px; margin: 30px auto 0; color: #fff; background: #7b0000; border-radius: 2px;}
@media only screen and (max-width: 767px) {
  .sa-pro .sec-example .float { text-align: center;}
  .sa-pro .sec-example .float .company-logo { display: block; width: 100%; margin: 0 auto 10px!important;}
  .sa-pro .sec-example .float .company-name { display: block; width: 100%;}
  .sa-pro .box-example .excerpt figure { margin-bottom: 30px;}
}
@media print, (min-width: 768px) { 
  .sa-pro .sec-example { padding: 80px 0;}
  .sa-pro .sec-example { margin: 0 50px; padding: 30px 25px;}
  .sa-pro .sec-example .company-logo { margin-right: 20px;}
  .sa-pro .sec-example .ttl { font-size: 22px;}
  .sa-pro .box-example .excerpt figure { width: 30%;}
  .sa-pro .box-example .excerpt dl { width: calc(100% - 33%);}
  .sa-pro .sec-example .box-link02 { width: 60%;}
}
/* .sec-example > SLICK Arrows */
.sa-pro .slick-prev, .sa-pro .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent;}
.sa-pro .slick-prev:before, .sa-pro .slick-next:before { color: #fff; font-size: 20px; line-height: 1;}
.sa-pro .slick-prev { top: 50%; left: 10px; width: 40px; height: 40px; background:rgba(46,56,76,0.95);  border-radius: 50px; z-index:10;}
.sa-pro .slick-prev:before { content: '←';}
.sa-pro .slick-next { top: 50%; right:  10px; width: 40px; height: 40px; background:rgba(46,56,76,0.95); border-radius: 50px; z-index:10;}
.sa-pro .slick-next:before { content: '→';}
.sa-pro .slick-track { display: flex;}
.sa-pro .slick-slide { height: auto !important;}
@media print, (min-width: 1201px) { 
  .sa-pro .slick-prev, .sa-pro .slick-next { width: 60px; height: 60px;}
  .sa-pro .slick-prev:before, .sa-pro .slick-next:before { font-size: 30px;}
  .sa-pro .slick-prev { left: 270px;}
  .sa-pro .slick-next { right: 270px;}
}
/* .sec-sec-flow */
.sa-pro .sec-flow { background: url(../img/sa-pro/bg-sec-flow-sp.jpg) no-repeat top center/100% auto;}
.sa-pro .sec-flow ul li { width: 100%; padding: 10px 10px 20px; text-align: center; font-size: 14px; background: #fff; line-height: 1.8; border: 1px solid #ddd;}
.sa-pro .sec-flow h2 { color: #fff;}
.sa-pro .sec-flow ul li .step { font-size: 14px; color: #fff; font-weight: bold; background: #7b0000;}
.sa-pro .sec-flow ul li .step:before { content: "step"; font-size: 12px;}
.sa-pro .sec-flow ul li .ttl { margin: 10px 0; color: #7b0000; font-size: 16px; font-weight: bold; line-height: 1.3;}
.sa-pro .sec-flow ul li .ttl span { font-size: 12px;}
.sa-pro .sec-flow ul li .text { font-size: 14px; text-align: left;}
@media only screen and (max-width: 767px) {
  .sa-pro .sec-flow ul li { margin-top: 10px; border: 1px solid #ddd;}
  .sa-pro .sec-flow ul li:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px;}
  .sa-pro  .sec-flow ul li:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
}
@media print, (min-width: 768px) { 
  .sa-pro .sec-flow { background-image: url(../img/sa-pro/bg-sec-flow.jpg); background-size: cover;}
  .sa-pro .sec-flow ul li { width: 19%; border-radius: 6px;}
  .sa-pro .sec-flow ul li .step { padding-bottom: 5px; color: #7b0000; font-size: 20px; background: none; border-bottom: 1.5px solid #7b0000;}
  .sa-pro .sec-flow ul li .ttl { min-height: 3em;}
  .sa-pro .sec-flow ul li .ttl span { display: block;}
}
/* .sec-faq */
.sa-pro .sec-faq a { color: #7b0000; text-decoration: underline;}
.sa-pro .sec-faq .accordion { margin-bottom: 20px; border: 1px solid #ccc;}
.sa-pro .sec-faq .toggle { display: none;}
.sa-pro .sec-faq .box-faq { position: relative;}
.sa-pro .sec-faq .question p { margin: 0!important; line-height: 1.3!important}
.sa-pro .sec-faq .question, .sec-faq .answer { backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s;}
.sa-pro .sec-faq .question { display: block; padding: 15px 40px;}
.sa-pro .sec-faq .question::after, .sec-faq .question::before { content: ""; position: absolute; right: 1.25em; top: 45%; width: 3px; height: 1em; background-color: #7b0000; transition: all 0.3s;}
.sa-pro .sec-faq .question::after { transform: rotate(90deg);}
.sa-pro .sec-faq .answer { max-height: 0; overflow: hidden;}
.sa-pro .sec-faq .answer-inr { padding: 15px;}
.sa-pro .sec-faq .answer .lead { margin-bottom: 30px!important; padding-bottom: 30px; font-size: 16px; font-weight: 500; border-bottom: 1px dashed #ddd;}
.sa-pro .sec-faq .toggle:checked + .question { color: #fff; background: #7b0000;}
.sa-pro .sec-faq .toggle:checked + .question + .answer { max-height: 500px; transition: all 1.5s;}
.sa-pro .sec-faq .toggle:checked + .question::before { transform: rotate(90deg) !important;}
.sa-pro .sec-faq .toggle:checked + .question::after {background-color: #fff;}
.sa-pro .sec-faq .ic-q { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; color: #7b0000; font-size: 21px; font-style: normal; font-weight: normal;}
.sa-pro .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: #7b0000; border-radius: 40px;}
@media print, (min-width: 768px) { 
  .sa-pro .sec-faq .question { padding: 20px 40px;}
  .sa-pro .sec-faq .question::after, .sec-faq .question::before { right: 1.25em; top: 1.25em;}
  .sa-pro .sec-faq .answer-inr { padding: 30px;}
}

/* BUTTON AREA */
.sa-pro .button-area.content { padding: 30px 0 16px; background: #d7c5ac;} 
.sa-pro .button-area .contents-inr { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px!important; padding: 0 20px!important}
.sa-pro .button-area .box { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 70px; padding: 0 50px 0 100px; color: #fff; font-size: 18px; font-weight: bold; background: #7b0000; border-radius: 85px; box-shadow: 0 0 4px rgba(0,0,0,0.6); z-index: 3;}
.sa-pro .button-area .box .point { width: 100%; height: 20px; line-height:20px; margin-bottom: 6px; color: #7b0000; font-size: 10px; text-align: center; font-weight: normal; background: #fff; border-radius: 20px;}
.sa-pro .button-area .box .small { margin-top: 5px; font-size: 10px; font-weight: normal;}
.sa-pro .button-area .box:nth-of-type(2), .button-area .box:nth-of-type(3) { color: #7b0000; background: #fff!important; border: 2px solid #7b0000;}
.sa-pro .button-area .box:nth-of-type(2) .point, .button-area .box:nth-of-type(3) .point { color: #fff; background: #7b0000;}
.sa-pro .button-area.mv-btm { margin-top: -20px;} 
.sa-pro .button-area.mv-btm .box { background: #7b0000;}
.sa-pro .button-area.mv-btm .box:nth-child(2), .button-area.mv-btm .box:nth-child(3) { color: #7b0000; border-color: #7b0000;}
.sa-pro .button-area.mv-btm .box:nth-child(2) .point, .button-area.mv-btm .box:nth-child(3) .point { color: #fff!important; background: #7b0000;}
.sa-pro .button-area.mv-btm .box .point { color: #7b0000;}
.sa-pro .button-area .icon { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 60px; height: 60px; background-size: 60px auto; background-repeat: no-repeat; background-position: center center;}
.sa-pro .button-area .icon.web { background-image: url(../img/sa-next/icon-web.png);}
.sa-pro .button-area .icon.tel { background-image: url(../img/sa-next/icon-tel.png);}
.sa-pro .button-area .icon.file { background-image: url(../img/sa-next/icon-file.png);}
@media only screen and (max-width: 767px) {
  .sa-pro .button-area.mv-btm { padding-bottom: 30px; background: #d7c5ac;}
  .sa-pro .button-area.mv-btm .text-deco-line { color: #000; font-size: 14px;}
  .sa-pro .button-area .box:nth-of-type(2) { margin: 16px 0;}
}
@media print, (min-width: 768px) { 
  .sa-pro .button-area .box { width: 32%; height: 85px; transition-duration: .05s;}
  .sa-pro .button-area .box:hover { color: #7b0000; background: #fff; transform: scale(1.06); opacity: 1;}
  .sa-pro .button-area .box:hover .point { color: #fff; background: #7b0000;}
  .sa-pro .button-area .box:nth-of-type(3):hover { color: #fff; background: #7b0000!important; border: 2px solid #fff;}
  .sa-pro .button-area .box:nth-of-type(3):hover .point { color: #7b0000; background: #fff;}
  .sa-pro .button-area.mv-btm { margin-top: -42.5px; background: linear-gradient(180deg, transparent 0%, transparent 30%, #faf8f3 30%, #faf8f3 100%);}
  .sa-pro .button-area.mv-btm .box:hover { color: #7b0000!important; background: #fff!important;}
  .sa-pro .button-area.mv-btm .box:hover .point { color: #fff!important; background: #7b0000;}
  .sa-pro .button-area.mv-btm .box:nth-child(3):hover { color: #fff!important; background: #7b0000!important; border: 2px solid #fff;}
  .sa-pro .button-area.mv-btm .box:nth-child(3):hover .point { color: #7b0000!important; background: #fff!important;}
}