@charset "UTF-8";
/* COMMON STYLE */
.sa-saiyou { color: #333; font-size: 16px;}
.sa-saiyou a:hover { color: #1a86d1; opacity: 0.8;}
.sa-saiyou h2 { margin-bottom: 30px; color: #009bdc; font-size: 20px!important; line-height: 1.5!important;}
.sa-saiyou h2 big { font-size: 30px!important}
.sa-saiyou h2 small { display: block; font-size: 14px!important;}
.sa-saiyou sup { font-size: 10px; vertical-align: super;}
.sa-saiyou .note { color: #777; font-size: 12px!important;}
.sa-saiyou sub { font-size: 10px;}
.sa-saiyou p { margin-bottom: 10px!important;}
.sa-saiyou p:nth-last-child() { margin-bottom: 0!important;}
.sa-saiyou strong { font-weight: bold;}
.sa-saiyou .text-underline { color: #009bdc; text-decoration: underline;}
.sa-saiyou .co-red { color: #dc1357;}
@media screen and (min-width: 768px) {
  #sa-common.sa-saiyou section .contents-inr { padding-top: 80px!important; padding-bottom: 80px!important}
  .sa-saiyou { color: #333; font-size: 14px;}
  .sa-saiyou h2 { font-size: 30px!important; font-weight: bold!important;}
  .sa-saiyou h2 big { font-size: 40px!important;}
  .sa-saiyou h2 small { display: block; font-size: 24px!important;}
}
.sec-sa-common h2 { font-weight: normal!important;}
/* .mv */
.sa-saiyou .mv { position: relative; background: #f0faff url(../img/sa-saiyou/bg-mv-sp.jpg)no-repeat center center/cover;}
.sa-saiyou .mv .mv-inr { overflow: hidden; height: 480px;}
.sa-saiyou h1 { margin: 21px 0 20px -0.5em; font-size: 15px; line-height: 1.5;}
.sa-saiyou .mv .logo-top { font-size: 18px; font-weight: bold; line-height: 1.3!important;}
.sa-saiyou .mv .logo-top big { font-size: 28px;}
.sa-saiyou .mv ul { display: flex; justify-content: center; width: fit-content; margin: auto!important}
.sa-saiyou .mv ul li { width: 45%; margin: 0 1%;}
@media screen and (max-width:428px) {
  .sa-saiyou .mv ul li { width: 33%;}
}
@media screen and (max-width: 767px) {
  .sa-saiyou .mv .box-left .mv-logo { width: 90%; margin: 0 auto 20px;}
  .sa-saiyou .mv .box-left, .sa-saiyou .mv .box-right { text-align: center;}
  .sa-saiyou h1 { text-align: center;}
  .sa-saiyou .mv ul { position: absolute; bottom: 180px; left: 0;}
  .sa-saiyou .mv .box-right { display: flex; justify-content: flex-end; align-items: flex-end}
  .sa-saiyou .mv .box-right img { width: 55%; min-width: 210px;}
}
@media screen and (min-width: 768px) { 
  .sa-saiyou .mv { background-image: url(../img/sa-saiyou/bg-mv-pc.jpg);}
  .sa-saiyou .mv .mv-inr { display: flex; justify-content: space-between; height: 440px;}
  .sa-saiyou h1 { margin: 40px 0 55px -0.5em;}
  .sa-saiyou .mv .box-left { width: 64%; height: 440px}
  .sa-saiyou .mv .logo-top { font-size: 20px;}
  .sa-saiyou .mv .logo-top big { font-size: 30px;}
  .sa-saiyou .mv .mv-logo { max-width: 500px; margin-bottom: 30px;}
  .sa-saiyou .mv .box-max-500 { max-width: 500px; text-align: center;}/* ロゴと同じ幅でセンタリングするために必要 */
  .sa-saiyou .mv ul li { margin: 0 10px;}
  .sa-saiyou .mv ul li img { width: 115px;}
  .sa-saiyou .mv .box-right { display: flex; align-items: flex-end; width: 36%; max-width: 350px; height: 440px;}
}
/* .sec-service */
.sa-saiyou .sec-service h2 { margin: 0 0 20px; font-weight: normal!important; line-height: 1!important;}
@media screen and (max-width: 767px) { 
  .sa-saiyou .sec-service .box-image { width: fit-content; max-width: 80%; margin: 0 auto 30px; text-align: center;}
}
@media screen and (min-width: 768px) { 
  .sa-saiyou .sec-service h2 { text-align: left!important;}
  .sa-saiyou .sec-service .box-outline { display: flex; justify-content: space-between; align-items: flex-start;}
  .sa-saiyou .sec-service .box-image { width: 35%;}
  .sa-saiyou .sec-service .box-text { width: calc(100% - 39.5%); font-size: 16px;}
}
/* .ul-service-btm */
.sa-saiyou .ul-service-btm li { width: 100%;}
.sa-saiyou .ul-service-btm li .ttl { display: flex; justify-content: center; align-items: center; min-height: 50px; margin-bottom: 20px!important; color: #fff; font-weight: bold; background: #009bdc; border-radius: 6px}
.sa-saiyou .ul-service-btm li .ttl big { font-size: 23px;}
.sa-saiyou .ul-service-btm li .ttl big::first-letter { color: #f8ef1a;}
.sa-saiyou .ul-service-btm li .ttl big::after { content: "!"; font-style: italic}
.sa-saiyou .ul-service-btm li .fukidashi { margin-bottom: 20px!important; font-size: 18px; line-height: 1.3!important; font-weight: bold; text-align: center;}
.sa-saiyou .ul-service-btm li .fukidashi span { display: block; color: #dc1357; font-size: 14px;}
.sa-saiyou .ul-service-btm li figure { width: 76%; margin: 20px auto 0;}
@media screen and (max-width: 767px) { 
  .sa-saiyou .ul-service-btm li:nth-child(n + 2) { margin-top: 60px}
  .sa-saiyou .ul-service-btm li figure img { width: 100%;}
}
@media screen and (min-width: 768px) { 
  .sa-saiyou .ul-service-btm { margin-top: -30px!important;}
  .sa-saiyou .ul-service-btm li { display: flex; flex-direction: column; width: 32%;}
  .sa-saiyou .ul-service-btm li .fukidashi, .sa-saiyou .ul-service-btm li .text { flex-grow: 1;}
  .sa-saiyou .ul-service-btm li .fukidashi { font-size: 1.818vw}
  .sa-saiyou .ul-service-btm li figure { width: fit-content;}
}
@media screen and (min-width: 990px) { 
  .sa-saiyou .ul-service-btm li .fukidashi { font-size: 18px}
}
/* .material-area */
.sa-saiyou .buttou-top { max-width: 498px; margin: 40px auto 30px; padding: 0 20px;}
.sa-saiyou .material-area { padding: 26px 0; color: #fff; background: linear-gradient(to bottom,  #1a86d1 50%, #009bdc 100%);}
.sa-saiyou .material-area .contents-inr { display: flex; justify-content: space-between; flex-direction: row-reverse; flex-wrap: wrap; max-width: 832px;}
.sa-saiyou .material-area .box-left .text { font-size: 18px; text-align: left; font-weight: bold; line-height: 1.5;}
.sa-saiyou .material-area .box-left .text img { width: 150px; margin-right: 3px;}
.sa-saiyou .material-area .box-left big { position: relative; margin-right: 10px; font-size: 30px; font-weight: bold; font-style: italic;}
.sa-saiyou .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-saiyou .material-area .box-left small { margin-right: 5px; font-size: 18px;}
.sa-saiyou .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-saiyou .material-area .text-right { margin: 10px 0 20px!important; font-size: 12px; text-align: center;}
.sa-saiyou .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 (max-width: 767px) { 
  .sa-saiyou .material-area .box-left, .sa-saiyou .material-area .box-right { margin: auto;}
}
@media screen and (min-width: 768px) { 
  .sa-saiyou .buttou-top { margin: 80px auto 30px;}
  .sa-saiyou .material-area .contents-inr { align-items: center;}
  .sa-saiyou .material-area .box-left { width: 41%;}
  .sa-saiyou .material-area .box-left .text { padding-left: 5px; font-size: 20px;}
  .sa-saiyou .material-area .box-left big { font-size: 40px;}
  .sa-saiyou .material-area .box-left big::after { background-size: 20px auto;}
  .sa-saiyou .material-area .box-left small { font-size: 23px;}
  .sa-saiyou .material-area a { width: 100%;}
  .sa-saiyou .material-area .box-right { width: 54%; max-width: 450px;}
  .sa-saiyou .material-area .text-right { margin: 10px 0 0!important; text-align: right;}
}
/* .sec-point */
.sa-saiyou .sec-point h3 { display: flex; align-items: center; margin-bottom: 22px; font-size: 18px; font-weight: bold; line-height: 1.3}
.sa-saiyou .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-saiyou .sec-point h4 { display: flex; justify-content: center; align-items: center; min-height: 50px; margin: 40px 0 20px; padding: 10px 20px; font-size: 18px; line-height: 1.5; text-align: center; border: 1px solid #333;}
.sa-saiyou .sec-point h5 { margin: 44px 0 20px; font-size: 20px; text-align: center; font-weight: normal}
.sa-saiyou .sec-point h5 img { margin-right: 10px;}
.sa-saiyou .sec-point .box-point { margin-bottom: 40px;}
.sa-saiyou .sec-point .box-point:last-of-type { margin-bottom:0;}
.sa-saiyou .sec-point .box-point .flex-center-center { margin-top: 30px!important;}
.sa-saiyou .box-point.one ul li:nth-child(2) img { background: #f4f6f8; border-radius: 10px;}
.sa-saiyou .box-point.two ul li { position: relative; width: 100%; margin-bottom: 5px; padding: 9px 10px; color: #fff; background: #138a4e;}
.sa-saiyou .box-point.three ul li:nth-child(2) { position: relative;}
.sa-saiyou .box-point.three ul li:nth-child(2) img { margin-top: 20px; background: #f4f6f8; border-radius: 8px;}
.sa-saiyou .box-point.three ul li:nth-child(2) .text { position: absolute; top: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 45%; height: 40px; color: #fff; line-height: 1.3; text-align: center; background: #138b4e; border-radius: 40px; z-index:2;}
.sa-saiyou .box-point.three ul li:nth-child(2) .text.left { left: 13px;}
.sa-saiyou .box-point.three ul li:nth-child(2) .text.right { right: 13px;}
.sa-saiyou .box-point.three ul li:nth-child(2) .text small { display: block; font-size: 10px;}
.sa-saiyou .box-point.three .ul-mensetsu li { padding: 20px 30px; background: #f1faff; border-radius: 10px;}
.sa-saiyou .box-point.three .ul-mensetsu li .ttl { margin-bottom: 20px!important; color: #009bdc; font-size: 24px; text-align: center; font-weight: bold; line-height: 1.5!important;}
.sa-saiyou .box-point.three .ul-mensetsu li .ttl small { font-size: 16px;}
.sa-saiyou .box-point.three a { color: #009bdc; text-decoration: underline;}
.sa-saiyou .sec-point .notes { margin-top: 20px!important; font-size: 16px!important}
@media screen and (max-width: 767px) {
  .sa-saiyou .sec-point h5 img { width: 44%; vertical-align: baseline}
  .sa-saiyou .box-point.one ul li:nth-child(2) { margin-top: 10px;}
  .sa-saiyou .box-point.two .box-outline { padding: 20px 0; background: #f4f6f8; border-radius: 10px;}
  .sa-saiyou .box-point.two .box-text { position: relative; width: 1000%; margin-bottom: 50px; padding: 0 20px;}
  .sa-saiyou .box-point.two .box-text::after { content: ""; position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); border: 30px solid transparent; border-top: 17.5px solid #138a4e;}
  .sa-saiyou .box-point.three .ul-ichigen li:nth-child(n + 2) { margin-top: 40px;}
  .sa-saiyou .box-point.three .ul-mensetsu li:nth-child(n + 2) { margin-top: 20px;}
}
@media screen and (min-width: 768px) { 
  .sa-saiyou .sec-point h3 { font-size: 23px;}
  .sa-saiyou .sec-point h4 { font-size: 21px;}
  .sa-saiyou .sec-point h5 { margin: 44px 0 40px; font-size: 30px;}
  .sa-saiyou .sec-point h5 img { vertical-align: baseline}
  .sa-saiyou .sec-point .box-point { margin-bottom: 80px;}
  .sa-saiyou .box-point.one ul li:nth-child(2) { margin-left: 10px;}
  .sa-saiyou .box-point.two .box-outline { align-items: flex-end; width: fit-content; margin: auto;}
  .sa-saiyou .box-point.two .box-text { margin:  5px -14px -10px 0;}
  .sa-saiyou .box-point.two ul li { width: 265px; height: 35px;}
  .sa-saiyou .box-point.two ul li::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 265px; border: 17.5px solid transparent; border-left: 17.5px solid #138a4e;}
  .sa-saiyou .box-point.three .ul-mensetsu li { width: 32%;}
  .sa-saiyou .sec-point .notes { text-align: center}
}
/* .sec-other */
.sec-other { position: relative; background: url(../img/sa-saiyou/bg-ohter_sp.jpg)no-repeat center center/cover; z-index: 0;}
.sec-other h2, .sec-other .text-lead { color: #fff;}
.sec-other::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,155,220,0.8); z-index: -1;}
.sec-other .text-lead { margin-bottom: 40px!important}
.sec-other ul li { padding: 20px 30px 10px; background: #fff; border-radius: 6px}
.sec-other ul li .ttl { margin-bottom: 25px; color: #009bdc; font-size: 18px; line-height: 1.3!important; font-weight: bold; text-align: center;}
@media screen and (max-width: 767px) {
  .sec-other ul li:nth-child(n + 2) { margin-top: 20px;}
}
@media screen and (min-width:769px) {
  .sec-other { background-image: url(../img/sa-saiyou/bg-ohter_pc.jpg);}
  #sa-common section.sec-other .contents-inr { padding-top: 40px!important; z-index: 2;}
  .sec-other ul li { width: 19%; padding: 25px 10px 0;}
  .sec-other ul li .ttl { min-height: 3em;}
}
/* .sa-saiyou .sec-plan */
.sec-plan table .sp-only { display: table-cell;}
.sec-plan table .pc-only { display: none;}
.sec-plan table { width: 100%;}
.sec-plan table .all-none { background: none; border: none;}
.sec-plan table thead th { width: 19%; vertical-align: bottom;}
.sec-plan table thead th.simple { border-right: 2px solid #fff;}
.sec-plan table thead th.regular { border-left: 2px solid #fff;}
.sec-plan table thead th.regular.plus { border-right: 2px solid #fff;}
.sec-plan table thead th div { padding: 10px 0; color: #fff; font-size: 24px; line-height: 1.3; text-align: center; background: #7d9fae; border-top-left-radius: 5px; border-top-right-radius: 5px}
.sec-plan table thead th small { display: block; font-size: 12px;}
.sec-plan table thead th.regular { width: 21%;}
.sec-plan table thead th.regular div { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100px; background: #1a86d1; border-top-left-radius: 10px; border-top-right-radius: 10px}
.sec-plan table thead th.regular.plus div { background: #1573b1}
.sec-plan table thead th.custom div { background: #125d91;}
.sec-plan table thead th:first-of-type { width: 20%;}
.sec-plan table tbody th { font-size: 13px; text-align: center; vertical-align: middle; background: #f2f3f7; border: 1px solid #a2b5c3;}
.sec-plan table td { padding: 20px 10px; font-size: 16px; text-align: center; vertical-align: middle; border: 1px solid #a2b5c3;}
.sec-plan table td.regular { border-left: 4px solid  #1a86d1; border-right: 4px solid  #1a86d1;}
.sec-plan table td.regular.border-bottom { border-bottom: 4px solid  #1a86d1;}
.sec-plan table td.sample { padding: 20px 10px;}
.sec-plan table td big { font-size: 24px;}
@media screen and (max-width:768px) {
  .sec-plan .sp-flick { overflow: hidden; overflow-x: scroll;}
  .sec-plan .text-flick { margin-bottom: 20px;  padding: 0 20px; line-height: 30px; text-align: center; background: #eee; border-radius: 30px;}
  .sec-plan .text-flick .co-red { font-size: 20px;}
  .sec-plan table { min-width: 860px;}
  .sec-plan table tbody th { padding: 5px 10px; text-align: center; border-top: none;}
  .sec-plan table tbody th.regular { border-left: 4px solid #1a86d1; border-right: 4px solid #1a86d1}
}
@media screen and (min-width:769px) {
  .sec-plan table .sp-only { display: none;}
  .sec-plan table .pc-only { display: table-cell;}
  .sec-plan table tbody th:first-of-type { padding: 0 10px; font-size: 13px; text-align: left}
}
/* .sa-saiyou .sec-comparison */
.sa-saiyou .sec-comparison table { width: 100%; margin-bottom: 15px;}
.sa-saiyou .sec-comparison table .sp-only { display: table-cell;}
.sa-saiyou .sec-comparison table .pc-only { display: none;}
.sa-saiyou .sec-comparison table small { font-size: 12px;}
.sa-saiyou .sec-comparison table big { font-size: 16px; font-weight: normal;}
.sa-saiyou .sec-comparison table th, .sa-saiyou .sec-comparison table td { padding: 10px; font-size: 12px; text-align: center; vertical-align: middle; font-weight: bold; border: 1px solid #a2b5c3;}
.sa-saiyou .sec-comparison thead th { height: 50px; vertical-align: middle; background: #ccc; border-color: #fff; border-bottom: none;}
.sa-saiyou .sec-comparison tbody th { background: #ced7dd;}
.sa-saiyou .sec-comparison thead th:nth-child(2) { border-top-left-radius: 6px;}
.sa-saiyou .sec-comparison thead th:nth-child(4) { border-top-right-radius: 6px;}
.sa-saiyou .sec-comparison tbody td { height: 50px;}
.sa-saiyou .sec-comparison table .bg-dark-blue { padding: 9px 10px; color: #fff; background: #0a3654;}
.sa-saiyou .sec-comparison table .bg-light-blue { background: #f1faff;}
.sa-saiyou .sec-comparison table .bg-blue { color: #fff; background: #009bdc;}
.sa-saiyou .sec-comparison table .all-none { background: none; border: none;}
@media screen and (max-width:768px) {
  .sa-saiyou .sec-comparison table .all-none { display: none;}  
  .sa-saiyou .sec-comparison thead th { width: 33.3%;}
}
@media screen and (min-width:769px) {
  .sa-saiyou .sec-comparison table .sp-only { display: none;}
  .sa-saiyou .sec-comparison table .pc-only { display: table-cell}
  .sa-saiyou .sec-comparison table big { font-size: 20px;}
  .sa-saiyou .sec-comparison table .bg-dark-blue, .sa-saiyou .sec-comparison tbody th { text-align: left;}
  .sa-saiyou .sec-comparison thead th { font-size: 16px;}
  .sa-saiyou .sec-comparison table th, .sa-saiyou .sec-comparison table td { font-size: 15px;}
  .sa-saiyou .sec-comparison tbody th { width: 28%;}
  .sa-saiyou .sec-comparison tbody td { width: 24%;}
}
/* .sec-example */
.sa-saiyou .sec-example { background: #f2f3f7;}
.sa-saiyou .sec-example .inr { max-width: 990px; margin: auto;}
.sa-saiyou .sec-example .text-lead { margin-bottom: 34px!important; font-size: 14px;}
.sa-saiyou .box-example { margin: 0 30px; background: #fff; border: 1.5px solid #009bdc; border-radius: 10px;}
.sa-saiyou .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-saiyou .box-example .ttl img { margin-right: 15px;}
.sa-saiyou .box-example-inr { padding: 10px 20px 10px;}
.sa-saiyou .box-example .head { display: flex; justify-content: space-between;}
.sa-saiyou .box-example .head figure { width: 100px;}
.sa-saiyou .box-example .head figure img { border-radius: 10px;}
.sa-saiyou .box-example .head .text { width: calc(100% - 115px); font-weight: bold;}
.sa-saiyou .box-example .head .text strong { color: #dc1357;}
.sa-saiyou .box-example dl { margin-top: 10px; line-height: 1.5;}
.sa-saiyou .box-example dl dt { padding-bottom: 10px; color: #009bdc; font-size: 18px; font-weight: bold; border-bottom: 1px solid #009bdc;}
.sa-saiyou .box-example dl dd { padding-top: 10px; line-height: 2;}
.sa-saiyou .box-example dl dt:last-of-type { margin-top: 20px;}
@media screen and (max-width: 767px) { 
  .sa-saiyou .sec-example .text-lead { margin-left: 20px!important; margin-right: 20px!important;}
  .sa-saiyou .box-example .ttl img { width: 50px;}
}
@media screen and (min-width: 768px) { 
  .sa-saiyou .sec-example { padding: 64px 0 80px;}
  .sa-saiyou .box-example .ttl { padding: 0 30px; font-size: 2.323vw;}
  .sa-saiyou .box-example-inr { padding: 30px 30px 10px;}
  .sa-saiyou .box-example .head figure { width: 25%;}
  .sa-saiyou .box-example .head .text { width: calc(100% - 28%); font-size: 2.323vw;}
  .sa-saiyou .box-example dl { margin-top: 30px;}
  .sa-saiyou .box-example dl dt { font-size: 20px;}
  .sa-saiyou .box-example dl dt:last-of-type { margin-top: 35px;}
  .sa-saiyou .box-example dl dd { font-size: 16px;}
}
@media screen and (min-width: 980px) {
  .sa-saiyou .box-example .ttl { font-size: 24px;}
  .sa-saiyou .box-example .head .text { font-size: 23px}
}
/* .sec-example > SLICK Arrows */
.sa-saiyou .slick-prev, .sa-saiyou .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-saiyou .slick-prev:before, .sa-saiyou .slick-next:before { color: #fff; font-size: 20px; line-height: 1;}
.sa-saiyou .slick-prev { top: 50%; left: 10px; width: 40px; height: 40px; background:rgba(46,56,76,0.95);  border-radius: 50px; z-index:10;}
.sa-saiyou .slick-prev:before { content: '←';}
.sa-saiyou .slick-next { top: 50%; right:  10px; width: 40px; height: 40px; background:rgba(46,56,76,0.95); border-radius: 50px; z-index:10;}
.sa-saiyou .slick-next:before { content: '→';}
.sa-saiyou .slick-track { display: flex;}
.sa-saiyou .slick-slide { height: auto !important;}
  @media print, (min-width: 769px) { 
  .sa-saiyou .slick-prev, .sa-saiyou .slick-next { width: 60px; height: 60px;}
  .sa-saiyou .slick-prev:before, .sa-saiyou .slick-next:before { font-size: 30px;}
  }
  @media screen and (min-width: 1201px) {
  .sa-saiyou .slick-prev, .sa-saiyou .slick-next { width: 60px; height: 60px;}
  .sa-saiyou .slick-prev:before, .sa-saiyou .slick-next:before { font-size: 30px;}
  .sa-saiyou .slick-prev { left: 270px;}
  .sa-saiyou .slick-next { right: 270px;}
  }
/* .sec-sec-flow */
.sa-saiyou .sec-flow { background: linear-gradient(to bottom,  #1a86d1 50%, #009bdc 100%);}
.sa-saiyou .sec-flow h2 { margin-bottom: 10px;}
.sa-saiyou .sec-flow h2, .sa-saiyou .sec-flow .text-lead { color: #fff;}
.sa-saiyou .sec-flow .text { font-size: 16px;}
.sa-saiyou .sec-flow ul { margin-top: 30px!important; color: #333}
.sa-saiyou .sec-flow ul li { width: 100%; padding: 0 10px 10px 10px!important; text-align: center; background: #fff; border-radius: 6px}
.sa-saiyou .sec-flow ul li p { margin-bottom: 10px; font-size: 16px; font-weight: bold}
.sa-saiyou .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-saiyou .sec-flow ul li .step:before { content: "step"; margin-right: 5px; font-size: 12px; font-weight: normal;}
@media screen and (max-width:768px) {
  .sa-saiyou .sec-flow .inner { padding-left: 40px; padding-right: 40px;}
  .sa-saiyou .sec-flow ul li { overflow: hidden}
  .sa-saiyou .sec-flow ul li:nth-child(n + 2) { margin-top: 20px}
}
@media screen and (min-width:769px) {
  .sa-saiyou .sec-flow ul { margin-top: 60px;}
  .sa-saiyou .sec-flow ul li { display: flex; flex-direction: column; width: 18%; text-align: center}
  .sa-saiyou .sec-flow ul li .step { padding-bottom: 5px;}
  .sa-saiyou .sec-flow ul li p { display: flex; justify-content: center; align-items: center; flex-grow: 1; margin: 25px 0 12px!important;}
  .sa-saiyou .sec-flow ul li figure { display: flex; align-items: flex-end; height: 120px;}
  .sa-saiyou .sec-flow ul li figure img { width: 100%; height: auto;}
}
/* .sec-faq */
.sa-saiyou .sec-faq a { color: #009bdc; text-decoration: underline;}
.sa-saiyou .sec-faq .accordion { margin-bottom: 20px; border: 1px solid #ccc;}
.sa-saiyou .sec-faq .toggle { display: none;}
.sa-saiyou .sec-faq .box-faq { position: relative;}
.sa-saiyou .sec-faq .question p { margin: 0!important; line-height: 1.3!important}
.sa-saiyou .sec-faq .question, .sa-saiyou .sec-faq .answer { backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s;}
.sa-saiyou .sec-faq .question { display: block; padding: 15px 40px;}
.sa-saiyou .sec-faq .question::after, .sa-saiyou .sec-faq .question::before { content: ""; position: absolute; right: 1.25em; top: 45%; width: 3px; height: 1em; background-color: #009bdc; transition: all 0.3s;}
.sa-saiyou .sec-faq .question::after { transform: rotate(90deg);}
.sa-saiyou .sec-faq .answer { max-height: 0; overflow: hidden;}
.sa-saiyou .sec-faq .answer-inr { padding: 15px;}
.sa-saiyou .sec-faq .answer .lead { margin-bottom: 30px!important; padding-bottom: 30px; font-size: 16px; font-weight: 500; border-bottom: 1px dashed #ddd;}
.sa-saiyou .sec-faq .toggle:checked + .question { color: #fff; background: #009bdc;}
.sa-saiyou .sec-faq .toggle:checked + .question + .answer { max-height: 500px; transition: all 1.5s;}
.sa-saiyou .sec-faq .toggle:checked + .question::before { transform: rotate(90deg) !important;}
.sa-saiyou .sec-faq .toggle:checked + .question::after {background-color: #fff;}
.sa-saiyou .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-saiyou .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-saiyou .sec-faq .question { padding: 20px 40px;}
  .sa-saiyou .sec-faq .question p { font-size: 16px;}
  .sa-saiyou .sec-faq .question::after, .sa-saiyou .sec-faq .question::before { right: 1.25em; top: 1.25em;}
  .sa-saiyou .sec-faq .answer-inr { padding: 30px;}
}
/* BUTTON AREA */
.sa-saiyou .button-area.content { padding: 25px 0; background: #e1e4ed;} 
.sa-saiyou .button-area .contents-inr { display: flex; justify-content: space-between; flex-wrap: wrap;}
.sa-saiyou .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-saiyou .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-saiyou .button-area .box .small { margin-top: 5px; font-size: 10px; font-weight: normal;}
.sa-saiyou .button-area .box:nth-of-type(2) { color: #1a86d1; background: #fff!important; border: 2px solid #1a86d1;}
.sa-saiyou .button-area .box:nth-of-type(2) .point { color: #fff; background: #1a86d1;}
.sa-saiyou .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-saiyou .button-area .icon.web { background-image: url(../img/sa-mensetsu/icon-web-o.png); background-size: 65px auto;}
.sa-saiyou .button-area .icon.file { background-image: url(../img/sa-mensetsu/icon-file-o.png);}
.sa-saiyou .button-area.mv-btm { margin-top: -42.5px;} 
@media screen and (max-width: 767px) {
  .sa-saiyou .button-area .box:nth-of-type(2) { margin-top: 16px;}
}
@media screen and (min-width: 768px) { 
  .sa-saiyou .button-area .contents-inr { max-width: 832px;}
  .sa-saiyou .button-area .box { width: 47%; height: 85px; transition-duration: .05s;}
  .sa-saiyou .button-area .box:hover { color: #1a86d1; background: #fff; transform: scale(1.06); opacity: 1;}
  .sa-saiyou .button-area .box:hover .point { color: #fff; background: #1a86d1;}
  .sa-saiyou .button-area .box:nth-of-type(2):hover { color: #fff; background: #1a86d1!important; border: 2px solid #fff;}
  .sa-saiyou .button-area .box:nth-of-type(2):hover .point { color: #1a86d1; background: #fff;}
}