@charset "UTF-8";
/* COMMON STYLE */
.sa-mensetsu { color: #333; font-size: 16px;}
.sa-mensetsu a:hover { color: #1a86d1; opacity: 0.8;}
.sa-mensetsu h2 { margin-bottom: 30px; color: #009bdc; font-size: 20px!important; line-height: 1.5!important;}
.sa-mensetsu h2 big { font-size: 30px!important}
.sa-mensetsu h2 small { display: block; font-size: 14px!important;}
.sa-mensetsu sup { font-size: 10px; vertical-align: super;}
.sa-mensetsu .notes { font-size: 12px!important;}
.sa-mensetsu sub { font-size: 10px;}
.sa-mensetsu p { margin-bottom: 10px!important;}
.sa-mensetsu p:nth-last-child() { margin-bottom: 0!important;}
.sa-mensetsu strong { font-weight: bold;}
.sa-mensetsu .text-underline { color: #009bdc; text-decoration: underline;}
@media screen and (min-width: 768px) { 
  .sa-mensetsu { color: #333; font-size: 14px;}
  .sa-mensetsu h2 { font-size: 30px!important; font-weight: bold!important;}
  .sa-mensetsu h2 big { font-size: 40px!important;}
  .sa-mensetsu h2 small { display: block; font-size: 24px!important;}
}
.sec-sa-common h2 { font-weight: normal!important;}
/* .mv */
.sa-mensetsu .mv { background: #f0faff url(../img/sa-mensetsu/bg-mv-sp.jpg)no-repeat center center/cover;}
.sa-mensetsu .mv .contents-inr { overflow: hidden; height: 480px;}
.sa-mensetsu h1 { margin: 20px 0 20px -0.5em; font-size: 15px; line-height: 1.5;}
.sa-mensetsu .mv .logo-top { font-size: 18px; font-weight: bold; line-height: 1.3!important;}
.sa-mensetsu .mv .logo-top big { font-size: 28px;}
.sa-mensetsu .mv .mv-logo { width: 75%;}
@media screen and (max-width: 767px) {
  .sa-mensetsu .mv .contents-inr { overflow: hidden;}
  .sa-mensetsu .mv .box-left .mv-logo { max-width:  90%; margin: 0 auto 20px;}
  .sa-mensetsu .mv .box-left, .sa-mensetsu .mv .box-right { text-align: center;}
  .sa-mensetsu h1 { text-align: center;}
  .sa-mensetsu .mv .box-right { display: flex; justify-content: center; align-items: flex-end; }
  .sa-mensetsu .mv .box-right img { width: 50%; min-width: 198px;}
}
@media screen and (min-width: 768px) { 
  .sa-mensetsu .mv { background-image: url(../img/sa-mensetsu/bg-mv-pc.jpg);}
  .sa-mensetsu .mv .contents-inr { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; height: 440px;}
  .sa-mensetsu h1 { margin: 0 0 30px -0.5em;}
  .sa-mensetsu .mv .box-left { display: flex; justify-content: center; flex-direction: column; width: 67%; height: 440px;}
  .sa-mensetsu .mv .mv-logo { max-width: 450px; margin-bottom: 50px;}
  .sa-mensetsu .mv .box-right { width: 32%; max-width: 325px;}
  .sa-mensetsu .mv .logo-top { font-size: 20px;}
  .sa-mensetsu .mv .logo-top big { font-size: 30px;}
}
/* .sec-service */
.sa-mensetsu .sec-service h2 { margin: 0 0 20px; font-weight: normal!important; line-height: 1!important;}
.sa-mensetsu .sec-service h3 { font-size: 20px; text-align: center; font-weight: normal;}
@media screen and (max-width: 767px) { 
  .sa-mensetsu .sec-service .box-image { width: fit-content; max-width: 80%; margin: 0 auto 30px; text-align: center;}
}
@media screen and (min-width: 768px) { 
  .sa-mensetsu .sec-service h2 { text-align: left!important;}
  .sa-mensetsu .sec-service .box-outline { display: flex; justify-content: space-between; align-items: flex-start;}
  .sa-mensetsu .sec-service .box-image { width: 36%;}
  .sa-mensetsu .sec-service .box-text { width: calc(100% - 38%); font-size: 16px;}
  .sa-mensetsu .sec-service h3 { font-size: 30px;}
}
.sa-mensetsu .sec-service .box-function { margin-top: 30px; padding: 30px 20px 20px; color: #fff; background: #1a86d1; border-radius: 10px;}
.sa-mensetsu .sec-service .box-function .inr { margin-top: 20px; padding: 15px; color: #333; background: #fff; border-radius: 10px;}
.sa-mensetsu .sec-service .box-function ul li { margin-bottom: 10px; padding-left: 26px; line-height: 1.5; background: url(../img/sa-mensetsu/icon-check.png) no-repeat left top 6px/16px auto;}
.sa-mensetsu .sec-service .box-function ul:first-of-type li:first-child { margin-bottom: 20px; line-height: 1.3;}
@media screen and (max-width: 767px) { 
  .sa-mensetsu .sec-service .box-function ul:first-of-type { margin-bottom: 30px;}
  .sa-mensetsu .sec-service .box-function ul li { font-size: 15px;}
}
@media screen and (min-width: 768px) { 
  .sa-mensetsu .sec-service .box-function { margin-top: 60px;}
  .sa-mensetsu .sec-service .box-function .inr { padding: 15px 25px;}
  .sa-mensetsu .sec-service h2 { font-size: 30px;}
  .sa-mensetsu .sec-service .box-function ul { width: 48%; font-size: 16px;}
}
/* .material-area */
.sa-mensetsu .buttou-top { max-width: 498px; margin: 0 auto 30px; padding: 0 20px;}
.sa-mensetsu .material-area { padding: 26px 0; color: #fff; background: linear-gradient(to bottom,  #1a86d1 50%, #009bdc 100%);}
.sa-mensetsu .material-area .contents-inr { display: flex; justify-content: space-between; flex-direction: row-reverse; flex-wrap: wrap; max-width: 832px;}
.sa-mensetsu .material-area .box-left .text { font-size: 18px; text-align: left; font-weight: bold; line-height: 1.5;}
.sa-mensetsu .material-area .box-left .text img { width: 150px; margin-right: 3px;}
.sa-mensetsu .material-area .box-left big { position: relative; margin-right: 10px; font-size: 30px; font-weight: bold; font-style: italic;}
.sa-mensetsu .material-area .box-left big::after { position: absolute; top: 0; right: -20px; content: ""; width: 20px; height: 20px; background: url(../img/common/img-material-text-top.png) no-repeat top right/15px auto;}
.sa-mensetsu .material-area .box-left small { margin-right: 5px; font-size: 18px;}
.sa-mensetsu .material-area a { position: relative; display: flex; justify-content: center; align-items: center; width: 315px; height: 50px; margin: 20px auto 0; color: #009bdc; font-size: 18px; font-weight: 500; background: #fff; border-radius: 50px;}
.sa-mensetsu .material-area .text-right { margin: 10px 0 20px!important; font-size: 12px; text-align: center;}
.sa-mensetsu .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:  #009bdc #009bdc transparent transparent;  transform: rotate(45deg);}
@media screen and (min-width: 768px) { 
  .sa-mensetsu .material-area .contents-inr { align-items: center;}
  .sa-mensetsu .material-area .box-left { width: 41%;}
  .sa-mensetsu .material-area .box-left .text { padding-left: 5px; font-size: 20px;}
  .sa-mensetsu .material-area .box-left big { font-size: 40px;}
  .sa-mensetsu .material-area .box-left big::after { background-size: 20px auto;}
  .sa-mensetsu .material-area .box-left small { font-size: 23px;}
  .sa-mensetsu .material-area a { width: 100%;}
  .sa-mensetsu .material-area .box-right { width: 54%; max-width: 450px;}
  .sa-mensetsu .material-area .text-right { margin: 10px 0 0!important; text-align: right;}
}
/* .sec-point */
.sa-mensetsu .sec-point h3 { display: flex; align-items: center; margin-bottom: 22px; font-size: 18px; font-weight: bold; line-height: 1.3}
.sa-mensetsu .sec-point h3 span { display: inline-block; width: 40px; height: 40px; line-height: 40px; margin-right: 15px; color: #fff; font-size: 30px; font-weight: normal; text-align: center; background: #009bdc;}
.sa-mensetsu .sec-point .box-point { margin-bottom: 40px;}
.sa-mensetsu .sec-point .box-point:last-of-type { margin-bottom: 0;}
.sa-mensetsu .sec-point .box-point figure { max-width: 675px; margin: 24px auto 0;}
.sa-mensetsu .sec-point .box-point figcaption { display: flex; justify-content: center; align-items: center; height: 50px; margin-bottom: 20px; font-size: 16px; font-weight: bold; border: 1px solid #333;}
.sa-mensetsu .sec-point .box-point-inr { position: relative; display: flex; justify-content: center; align-items: center;}
.sa-mensetsu .box-point-inr .img-left { position: relative; margin-bottom: -34%;}
.sa-mensetsu .box-point-inr .img-left::before { content: "応募者"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: bold; white-space: nowrap;}
.sa-mensetsu .box-point-inr .mockup { overflow: hidden; display: flex; aspect-ratio: 1 / 1.89; min-height: 240px; margin-right: 10px; border: 5px solid #2d2d2d; border-radius: 16px;}
.sa-mensetsu .box-point-inr .mockup img { width: 100%;}
.sa-mensetsu .box-point-inr .attention p { font-size: 16px;  font-weight: bold;}
.sa-mensetsu .box-point-inr .attention span { color: #38a76f;}
@media screen and (max-width: 674px) {
  .sa-mensetsu .sec-point .box-point-inr { flex-wrap: wrap;}
}
@media screen and (min-width: 675px) {
  .sa-mensetsu .sec-point h3 { font-size: 23px;}
  .sa-mensetsu .sec-point .box-point { margin-bottom: 80px;}
  .sa-mensetsu .sec-point .box-point figcaption { font-size: 21px;}
  .sa-mensetsu .box-point-inr .img-left { margin-bottom: -120px;}
  .sa-mensetsu .box-point-inr .mockup { max-width: 190px; border-width: 7px;  border-radius: 28px;}
  .sa-mensetsu .box-point-inr .attention { position: relative; display: inline-block; margin: 0 0 10px; padding: 0 20px;}
  .sa-mensetsu .box-point-inr .attention p { line-height: 1.3!important;}
  .sa-mensetsu .box-point-inr .attention:before, .sa-mensetsu .box-point-inr .attention:after { position: absolute; content: ""; width: 2px; height: 100%; background: #333; border-radius: 3px; }
  .sa-mensetsu .box-point-inr .attention:before  { left: 0; top: 0; transform: rotate(-25deg);}
  .sa-mensetsu .box-point-inr .attention:after { right: 0; top: 0; transform: rotate(25deg);} 
}

/* point01・point02 */
.sa-mensetsu .box-point-inr .img-left { width: 20%;}
.sa-mensetsu .box-point-inr .mockup { width: 40%;}
.sa-mensetsu .box-point-inr .img-center { width: 30%;}
.sa-mensetsu .box-point-inr .img-right { width: 100%; text-align: center;}
/* point02 */
.sa-mensetsu .box-point-inr.two .mockup { align-items: flex-start; background: #e2e5e6;}
.sa-mensetsu .box-point-inr.two .box-fukidashi { position: relative; width: 100%; margin-top: 30px; padding: 20px 20px 0; font-size: 14px; font-weight: bold; background: #f0faff; border-radius: 10px;}
.sa-mensetsu .box-point-inr.two .box-fukidashi::before { content: ""; position: absolute; top: -20px; left: 50%; width: 0px; height: 0px; border-style: solid; border-color: transparent transparent #f0faff transparent; border-width: 0 10px 20px 10px;}
.sa-mensetsu .box-point-inr.two .box-fukidashi b { color: #009bdc; font-size: 16px;}
.sa-mensetsu .box-point-inr.two .box-fukidashi p { margin-top: 5px!important; line-height: 1.5!important;}
/* point03 */
.sa-mensetsu .box-point-inr.three .mockup { align-items: center; background: #fbf8fb;}
.sa-mensetsu .box-point-inr.three .attention p { white-space: nowrap;}
@media screen and (max-width: 674px) {
  .sa-mensetsu .box-point-inr .mockup { margin-left: 5px;}
  .sa-mensetsu .box-point-inr .img-right { width: 100%; margin-top: 30px;}
  /* point01・point02・point03 */
  .sa-mensetsu .box-point-inr.one .img-right, .sa-mensetsu .box-point-inr.two .img-right, .sa-mensetsu .box-point-inr.three .img-right { display: flex; justify-content: center; align-items: center}
  .sa-mensetsu .box-point-inr.one .img-right .image, .sa-mensetsu .box-point-inr.two .img-right .image { width: 35%; margin-left: 20px;}
  /* point03 */
  .sa-mensetsu .box-point-inr.three .img-center.sp { display: block;}
  .sa-mensetsu .box-point-inr.three .img-center.pc { display: none;}
  .sa-mensetsu .box-point-inr.three .img-right .image { width: 40%; margin: auto;}
  .sa-mensetsu .box-point-inr.three .attention { position: relative; display: inline-block; margin: 0 0 10px; padding: 0 20px;}
  .sa-mensetsu .box-point-inr.three .attention p { line-height: 1.3!important;}
  .sa-mensetsu .box-point-inr.three .attention:before, .sa-mensetsu .box-point-inr.three .attention:after { position: absolute; content: ""; width: 2px; height: 100%; background: #333; border-radius: 3px; }
  .sa-mensetsu .box-point-inr.three .attention:before  { left: 0; top: 0; transform: rotate(-25deg);}
  .sa-mensetsu .box-point-inr.three .attention:after { right: 0; top: 0; transform: rotate(25deg);} 
}
@media screen and (min-width: 675px) {
  .sa-mensetsu .box-point-inr .img-left { width: 16%;}
  .sa-mensetsu .box-point-inr .img-left::before { top: -30px; font-size: 16px;}
  .sa-mensetsu .box-point-inr .img-center { width: 22%;}
  .sa-mensetsu .box-point-inr .img-right { width: 31%;}
  /* point02 */
  .sa-mensetsu .box-point-inr.two .img-center { margin-top: -70px;}
  .sa-mensetsu .box-point-inr.two .img-right { margin-top: -110px;}
  .sa-mensetsu .box-point-inr.two .box-fukidashi { position: absolute; bottom: 0; right: 0; width: 50%; padding: 10px 20px 0; font-size: 13px;}
  .sa-mensetsu .box-point-inr.two .box-fukidashi::before { left: 20%;}
  /* point03 */
  .sa-mensetsu .box-point-inr.three .attention { margin-bottom: 25px;}
  .sa-mensetsu .box-point-inr.three .img-center.pc { display: block;}
  .sa-mensetsu .box-point-inr.three .img-center.sp { display: none;}
}
/* .sec-example */
.sa-mensetsu .sec-example { padding: 40px 0;}
.sa-mensetsu .sec-example .inr { max-width: 990px; margin: auto;}
.sa-mensetsu .sec-example .text-lead { margin-bottom: 34px!important; font-size: 14px;}
.sa-mensetsu .box-example { margin: 0 30px; border: 1.5px solid #009bdc; border-radius: 10px;}
.sa-mensetsu .box-example .ttl { display: flex; align-items: center; height: 60px; padding: 0 15px; color: #fff; font-size: 18px; background: #009bdc; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.sa-mensetsu .box-example .ttl img { margin-right: 15px;}
.sa-mensetsu .box-example-inr { padding: 10px 20px 10px;}
.sa-mensetsu .box-example .head { display: flex; justify-content: space-between;}
.sa-mensetsu .box-example .head figure { width: 100px;}
.sa-mensetsu .box-example .head figure img { border-radius: 10px;}
.sa-mensetsu .box-example .head .text { width: calc(100% - 115px); font-weight: bold;}
.sa-mensetsu .box-example .head .text strong { color: #dc1357;}
.sa-mensetsu .box-example dl { margin-top: 10px; line-height: 1.5;}
.sa-mensetsu .box-example dl dt { padding-bottom: 10px; color: #009bdc; font-size: 18px; font-weight: bold; border-bottom: 1px solid #009bdc;}
.sa-mensetsu .box-example dl dd { padding-top: 10px; line-height: 2;}
.sa-mensetsu .box-example dl dt:last-of-type { margin-top: 20px;}
@media screen and (max-width: 767px) { 
  .sa-mensetsu .sec-example .text-lead { margin-left: 20px!important; margin-right: 20px!important;}
  .sa-mensetsu .box-example .ttl img { width: 50px;}
}
@media screen and (min-width: 768px) { 
  .sa-mensetsu .sec-example { margin: 0 50px; padding: 64px 0 80px;}
  .sa-mensetsu .box-example .ttl { padding: 0 30px; font-size: 2.323vw;}
  .sa-mensetsu .box-example-inr { padding: 30px 30px 10px;}
  .sa-mensetsu .box-example .head figure { width: 25%;}
  .sa-mensetsu .box-example .head .text { width: calc(100% - 28%); font-size: 2.323vw;}
  .sa-mensetsu .box-example dl { margin-top: 30px;}
  .sa-mensetsu .box-example dl dt { font-size: 20px;}
  .sa-mensetsu .box-example dl dt:last-of-type { margin-top: 35px;}
  .sa-mensetsu .box-example dl dd { font-size: 16px;}
}
@media screen and (min-width: 980px) {
  .sa-mensetsu .box-example .ttl { font-size: 24px;}
  .sa-mensetsu .box-example .head .text { font-size: 23px}
}
/* .sec-example > SLICK Arrows */
.sa-mensetsu .slick-prev, .sa-mensetsu .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-mensetsu .slick-prev:before, .sa-mensetsu .slick-next:before { color: #fff; font-size: 20px; line-height: 1;}
.sa-mensetsu .slick-prev { top: 50%; left: 10px; width: 40px; height: 40px; background:rgba(46,56,76,0.95);  border-radius: 50px; z-index:10;}
.sa-mensetsu .slick-prev:before { content: '←';}
.sa-mensetsu .slick-next { top: 50%; right:  10px; width: 40px; height: 40px; background:rgba(46,56,76,0.95); border-radius: 50px; z-index:10;}
.sa-mensetsu .slick-next:before { content: '→';}
.sa-mensetsu .slick-track { display: flex;}
.sa-mensetsu .slick-slide { height: auto !important;}
@media print, (min-width: 769px) { 
  .sa-mensetsu .slick-prev, .sa-mensetsu .slick-next { width: 60px; height: 60px;}
  .sa-mensetsu .slick-prev:before, .sa-mensetsu .slick-next:before { font-size: 30px;}
}
@media screen and (min-width: 1201px) {
  .sa-mensetsu .slick-prev, .sa-mensetsu .slick-next { width: 60px; height: 60px;}
  .sa-mensetsu .slick-prev:before, .sa-mensetsu .slick-next:before { font-size: 30px;}
  .sa-mensetsu .slick-prev { left: 270px;}
  .sa-mensetsu .slick-next { right: 270px;}
}
/* .sec-plan */
.sa-mensetsu .sec-plan { background: #f2f3f7;}
.sa-mensetsu .sec-plan .box-left table { margin-bottom: 20px; font-size: 18px; text-align: center;}
.sa-mensetsu .sec-plan .box-left table small { margin-left: 5px; font-size: 14px;}
.sa-mensetsu .sec-plan .box-left table th, .sa-mensetsu .sec-plan .box-left table td { height: 50px; padding: 0 10px; font-weight: normal; vertical-align: middle; border: 1px solid #333;}
.sa-mensetsu .sec-plan .box-left table td { background: #fff;}
.sa-mensetsu .sec-plan .box-left table thead th { color: #fff; font-size: 14px; background: #009bdc;}
.sa-mensetsu .sec-plan .box-left table tbody th { font-size: 14px; background: #a1b5c3;}
.sa-mensetsu .sec-plan .box-left table thead th.none-all { background: none; border: none!important;}
.sa-mensetsu .sec-plan .box-outline .notes { line-height: 1.8;}
.sa-mensetsu .sec-plan .box-right .notes li { padding-left: 1.5em;}
.sa-mensetsu .sec-plan .box-right .notes li:before { content: "■"; margin: 0 5px 0 -1.2em; color: #f1c321;}
.sa-mensetsu .sec-plan .bnr-area { position: relative; margin-bottom: 20px; padding: 15px; background: #d0dae1; border-radius: 10px;}
.sa-mensetsu .sec-plan .bnr-area .ttl { margin: 30px 0 10px 0!important; font-size: 18px; text-align: center; font-weight: bold; line-height: 1.4!important;}
.sa-mensetsu .sec-plan .bnr-area .ttl small { display: block; font-size: 14px;}
.sa-mensetsu .sec-plan .bnr-area .label { position: absolute; right: -10px; top: -40px; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 80px; height: 80px; line-height: 80; color: #fff; background: #f1c321; border-radius: 100px; box-shadow: 3px 3px #a6aeb4;}
.sa-mensetsu .sec-plan .bnr-area .label-line { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 70px; height: 70px; border: 2px solid #f8e190; border-radius: 90px;}
.sa-mensetsu .sec-plan .bnr-area .label-line .inr { transform: rotate( 10deg ); font-weight: bold; line-height: 0.9;}
.sa-mensetsu .sec-plan .bnr-area .label-line big { position: relative; display: block; margin-left: -10px; font-size: 26px;}
.sa-mensetsu .sec-plan .bnr-area .label-line big::after { content: "%"; position: absolute; top: 0px; right: -12px; font-size: 16px;}
.sa-mensetsu .sec-plan .bnr-area .label-line big::before { content: "OFF"; position: absolute; bottom: -2px; right: -18px; font-size: 11px;}
.sa-mensetsu .sec-plan .bnr-area ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
.sa-mensetsu .sec-plan .bnr-area ul li { width: 100%; color: #c70f0f; text-align: center; background: #fff;}
.sa-mensetsu .sec-plan .bnr-area ul li:first-child { color: #009bdc; border-top-left-radius: 6px; border-top-right-radius: 6px;}
.sa-mensetsu .sec-plan .bnr-area ul li:nth-child(2) { border-bottom-left-radius: 6px;}
.sa-mensetsu .sec-plan .bnr-area ul li:last-child { color: #7b0000; border-left: 1px solid #dcdcdc; border-bottom-right-radius: 6px;}
.sa-mensetsu .sec-plan .bnr-area ul li .site-ttl { height: 25px; color: #fff; font-size: 12px; background: #c70f0f;}
.sa-mensetsu .sec-plan .bnr-area ul li:first-child .site-ttl { background: #009bdc; border-top-left-radius: 6px; border-top-right-radius: 6px;}
.sa-mensetsu .sec-plan .bnr-area ul li:last-child .site-ttl { background: #7b0000;}
.sa-mensetsu .sec-plan .bnr-area .text-period { font-size: 17px; font-weight: bold;}
@media screen and (max-width: 767px) {
  .sa-mensetsu .sec-plan .bnr-area { margin-top: 50px;}
}
@media screen and (min-width: 768px) {
  .sa-mensetsu .sec-plan .box-outline { display: flex; justify-content: space-between;}
  .sa-mensetsu .sec-plan .box-outline .box-left { width: 50%;}
  .sa-mensetsu .sec-plan .box-left table tbody th { font-size: 16px;}
  .sa-mensetsu .sec-plan .box-outline .box-right { width: 48%;}
  .sa-mensetsu .sec-plan .bnr-area .ttl { top: -20px; width: calc(100% - 100px); margin: 10px 0 20px!important; font-size: 23px;}
  .sa-mensetsu .sec-plan .bnr-area .label { top: -20px; right: 20px; width: 100px; height: 100px; line-height: 100; box-shadow: 5px 5px #a6aeb4;}
  .sa-mensetsu .sec-plan .bnr-area .label-line { width: 90px; height: 90px;}
  .sa-mensetsu .sec-plan .bnr-area .label-line big { margin-left: -20px; font-size: 38px;}
  .sa-mensetsu .sec-plan .bnr-area .label-line big::after { top: 5px; font-size: 20px;}
  .sa-mensetsu .sec-plan .bnr-area .label-line big::before { font-size: 13px;}
  .sa-mensetsu .sec-plan .bnr-area ul li { width: 50%; color: #c70f0f; text-align: center; background: #fff;}
  .sa-mensetsu .sec-plan .bnr-area ul li:first-child { width: 100%;}
}
/* .sec-sec-flow */
.sa-mensetsu .sec-flow { background: linear-gradient(to bottom,  #1a86d1 50%, #009bdc 100%);}
.sa-mensetsu .sec-flow h2 { color: #fff;}
.sa-mensetsu .sec-flow ul li { width: 100%; padding: 0 10px 20px; text-align: center; font-size: 20px; font-weight: bold; line-height: 1.8; background: #fff;}
.sa-mensetsu .sec-flow ul li .step { display: block; width: 100px; height: 30px; line-height: 30px; margin: auto; color: #fff; font-size: 20px; font-weight: bold; background: #128dd5;}
.sa-mensetsu .sec-flow ul li .step:before { content: "step"; margin-right: 5px; font-size: 12px; font-weight: normal;}
.sa-mensetsu .sec-flow .flow-inr { margin-top: 10px;}
.sa-mensetsu .sec-flow .flow-inr .small-text { font-size: 14px;}
@media screen and (max-width: 767px) {
  .sa-mensetsu .sec-flow ul li { margin-top: 10px;}
  .sa-mensetsu .sec-flow ul li:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px;}
 .sa-mensetsu  .sec-flow ul li:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
}
@media screen and (min-width: 768px) { 
  .sa-mensetsu .sec-flow ul li { width: 24%; padding: 0 20px 40px; font-size: 24px; border-radius:10px;}
  .sa-mensetsu .sec-flow ul li .step { padding-bottom: 5px;}
  .sa-mensetsu .sec-flow .flow-inr { display: flex; justify-content: center; flex-direction: column; min-height: 100px; margin-top: 40px;} 
}
/* .sec-faq */
.sa-mensetsu .sec-faq a { color: #009bdc; text-decoration: underline;}
.sa-mensetsu .sec-faq .accordion { margin-bottom: 20px; border: 1px solid #ccc;}
.sa-mensetsu .sec-faq .toggle { display: none;}
.sa-mensetsu .sec-faq .box-faq { position: relative;}
.sa-mensetsu .sec-faq .question p { margin: 0!important; line-height: 1.3!important}
.sa-mensetsu .sec-faq .question, .sa-mensetsu .sec-faq .answer { backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s;}
.sa-mensetsu .sec-faq .question { display: block; padding: 15px 40px;}
.sa-mensetsu .sec-faq .question::after, .sa-mensetsu .sec-faq .question::before { content: ""; position: absolute; right: 1.25em; top: 45%; width: 3px; height: 1em; background-color: #009bdc; transition: all 0.3s;}
.sa-mensetsu .sec-faq .question::after { transform: rotate(90deg);}
.sa-mensetsu .sec-faq .answer { max-height: 0; overflow: hidden;}
.sa-mensetsu .sec-faq .answer-inr { padding: 15px;}
.sa-mensetsu .sec-faq .answer .lead { margin-bottom: 30px!important; padding-bottom: 30px; font-size: 16px; font-weight: 500; border-bottom: 1px dashed #ddd;}
.sa-mensetsu .sec-faq .toggle:checked + .question { color: #fff; background: #009bdc;}
.sa-mensetsu .sec-faq .toggle:checked + .question + .answer { max-height: 500px; transition: all 1.5s;}
.sa-mensetsu .sec-faq .toggle:checked + .question::before { transform: rotate(90deg) !important;}
.sa-mensetsu .sec-faq .toggle:checked + .question::after {background-color: #fff;}
.sa-mensetsu .sec-faq .ic-q { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; color: #009bdc; font-size: 21px; font-style: normal; font-weight: normal;}
.sa-mensetsu .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: #009bdc; border-radius: 40px;}
@media screen and (min-width: 768px) { 
  .sa-mensetsu .sec-faq .question { padding: 20px 40px;}
  .sa-mensetsu .sec-faq .question p { font-size: 16px;}
  .sa-mensetsu .sec-faq .question::after, .sa-mensetsu .sec-faq .question::before { right: 1.25em; top: 1.25em;}
  .sa-mensetsu .sec-faq .answer-inr { padding: 30px;}
}
/* BUTTON AREA */
.sa-mensetsu .button-area.content { padding: 25px 0; background: #e1e4ed;} 
.sa-mensetsu .button-area .contents-inr { display: flex; justify-content: space-between; flex-wrap: wrap;}
.sa-mensetsu .button-area .box { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 70px; padding: 0 30px 0 100px; color: #fff; font-size: 18px; font-weight: bold; background: #1a86d1; border-radius: 85px; box-shadow: 0 0 4px rgba(0,0,0,0.6);}
.sa-mensetsu .button-area .box .point { width: 100%; height: 20px; line-height:20px; margin-bottom: 6px; color: #1a86d1; font-size: 10px; text-align: center; font-weight: normal; background: #fff; border-radius: 20px;}
.sa-mensetsu .button-area .box .small { margin-top: 5px; font-size: 10px; font-weight: normal;}
.sa-mensetsu .button-area .box:nth-of-type(2) { color: #1a86d1; background: #fff!important; border: 2px solid #1a86d1;}
.sa-mensetsu .button-area .box:nth-of-type(2) .point { color: #fff; background: #1a86d1;}
.sa-mensetsu .button-area .icon { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 75px; height: 75px; background-size: 75px auto; background-repeat: no-repeat; background-position: center center;}
.sa-mensetsu .button-area .icon.web { background-image: url(../img/sa-mensetsu/icon-web-o.png); background-size: 65px auto;}
.sa-mensetsu .button-area .icon.file { background-image: url(../img/sa-mensetsu/icon-file-o.png);}
.sa-mensetsu .button-area.mv-btm { margin-top: -42.5px;} 
@media screen and (max-width: 767px) {
  .sa-mensetsu .button-area .box:nth-of-type(2) { margin-top: 16px;}
}
@media screen and (min-width: 768px) { 
  .sa-mensetsu .button-area .contents-inr { max-width: 832px;}
  .sa-mensetsu .button-area .box { width: 47%; height: 85px; transition-duration: .05s;}
  .sa-mensetsu .button-area .box:hover { color: #1a86d1; background: #fff; transform: scale(1.06); opacity: 1;}
  .sa-mensetsu .button-area .box:hover .point { color: #fff; background: #1a86d1;}
  .sa-mensetsu .button-area .box:nth-of-type(2):hover { color: #fff; background: #1a86d1!important; border: 2px solid #fff;}
  .sa-mensetsu .button-area .box:nth-of-type(2):hover .point { color: #1a86d1; background: #fff;}
}