@charset "UTF-8";

/*---------- ページ全体の指定 ----------*/

.service-page {
margin:0;
font-size:100%;
color:#111;
background-color:#fff;
font-family:"Noto Serif JP", serif;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}


/*---------- PC・スマホの非表示指定 ----------*/

@media screen and (max-width:768px){.service-page .spnone{display:none;}}
@media screen and (min-width:769px){.service-page .pcnone{display:none;}}

.service-page{padding:0;}
.service-page h2{
margin:0 0 35px 0;
padding:0 0 20px 0;
font-size:200%;
font-weight:bold;
line-height:150%;
text-align:center;
position:relative;
}
.service-page h2::after {
content: '';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:60px;
height:4px;
background-color:#00979c;
}
.service-page__intro{
margin:30px 20px 45px 20px;
font-size:100%;
line-height:180%;
}
@media screen and (min-width:769px){
.service-page{padding:30px 0;}
.service-page h2{
margin:0 0 45px 0;
padding:0 0 25px 0;
font-size:60px;
}
.service-page__intro{margin:-150px 0 60px 0;font-size:16px;text-align:center;}
}


.service-page__fee{margin:0 20px 60px 20px;}
.service-page__fee_memo{
margin:0 0 20px 0;
font-size:110%;
line-height:180%;
text-align:center;
}
.service-page__fee_caption{
margin:15px 0 30px 0;
font-size:90%;
line-height:180%;
}
.service-page__fee_add{
margin:0 auto;
padding:15px 20px;
box-sizing:border-box;
background:#f3f8f8;
}
.service-page__fee_add p{font-size:100%;}
.service-page__fee_add strong{font-size:130%;font-weight:bold;line-height:180%;color:#008187;}
.service-page__fee h3{
margin:45px 0 0 0;
font-size:180%;
font-weight:bold;
line-height:140%;
text-align:center;
}
.service-page__fee h3 span{font-size:60%;font-weight:normal;}
.service-page__fee_box{padding:0 0 5px 0;}
.service-page__fee_item{
margin:30px 0 0 0;
padding:30px;
box-sizing:border-box;
border:1px solid #b1d6d8;
}
.service-page__fee h4{
margin:0;
padding:0 0 15px 0;
font-size:180%;
font-weight:bold;
line-height:150%;
color:#008187;
text-align:center;
}
.service-page__fee_list{}
.service-page__fee_list ul{margin:0;padding:0;list-style:none;}
.service-page__fee_list ul li{
margin:0;
padding:6px 0 0 24px;
font-size:110%;
font-weight:bold;
line-height:150%;
position:relative;
}
.service-page__fee_list ul li:before {
display:block;
font-family:"Font Awesome 5 Free";
font-weight: 900;
content:'\f058';
color:#00979c;
position:absolute;
left:0;
}
.service-page__fee_push{
margin:25px 0 30px 0;
padding:15px 20px 5px 20px;
background:#ecf5f6;
border:1px solid #00979c;
border-radius:8px;
}
.service-page__fee_push h5{
margin:0;
padding:0 0 3px 0;
font-size:100%;
font-weight:normal;
line-height:150%;
text-align:center;
color:#00979c;
}
.service-page__fee_push ul{margin:0;padding:0;list-style:none;}
.service-page__fee_push ul li{
margin:0;
padding:10px 0;
font-size:110%;
font-weight:bold;
line-height:150%;
}
.service-page__fee_push ul li:not(:last-child){border-bottom:1px dotted #ccc;}
@media screen and (min-width:769px){
.service-page__fee{
max-width:1180px;
width:94%;
margin:0 auto 90px auto;
}
.service-page__fee_memo{margin:0 0 30px 0;font-size:21px;}
.service-page__fee_caption{margin:15px 0 45px 0;font-size:16px;text-align:center;}
.service-page__fee_add{width:980px;margin:0 auto;padding:15px 60px;}
.service-page__fee_add p{font-size:16px;}
.service-page__fee_add strong{font-size:18px;}
.service-page__fee h3{
margin:75px 0 30px 0;
font-size:36px;
font-weight:bold;
line-height:120%;
}
.service-page__fee h3 span{font-size:16px;}
.service-page__fee_box{display:flex;flex-wrap:wrap;justify-content:space-between;}
.service-page__fee_item{width:32%;margin:0;padding:10px 24px 24px 24px;}
.service-page__fee h4{
padding:0;
height:80px;
font-size:28px;
font-weight:bold;
line-height:130%;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}
.service-page__fee_list{height:150px;}
.service-page__fee_list ul li{font-size:18px;}
.service-page__fee_push h5{font-size:16px;}
.service-page__fee_push ul li{font-size:16px;}
}


.service-page__diff{margin:0 20px 60px 20px;}
.service-page__diff_box{padding:0;}
.service-page__diff_item{
margin:0 0 30px 0;
padding:25px 30px 30px 30px;
box-sizing:border-box;
border:2px solid #00979c;
}
.service-page__diff h3{
margin:0;
padding:0 0 10px 0;
font-size:180%;
font-weight:bold;
line-height:150%;
text-align:center;
color:#00979c;
border-bottom:1px solid #00979c;
}
.service-page__diff ul{margin:20px 0 30px 0;padding:0;list-style:none;}
.service-page__diff ul li{
margin:0;
padding:6px 0 0 28px;
font-size:110%;
line-height:150%;
position:relative;
}
.service-page__diff ul li:before {
display:block;
font-family:"Font Awesome 5 Free";
font-weight: 900;
content:'\f058';
color:#00979c;
position:absolute;
left:0;
}
.service-page__diff_cost{
margin:0;
padding:20px;
background:#ecf5f6;
border-radius:8px;
}
.service-page__diff_cost h4{
margin:0;
padding:3px 0 20px 0;
font-size:100%;
line-height:100%;
text-align:center;
}
.service-page__diff_cost h4 span{
padding:2px 20px;
color:#fff;
background:#00979c;
border-radius:30px;
}
.service-page__diff_price{
font-size:48px;
font-weight:bold;
line-height:100%;
text-align:center;
color:#00979c;
}
.service-page__diff_price span{font-size:150%;}
@media screen and (min-width:769px){
.service-page__diff{
max-width:1180px;
width:94%;
margin:0 auto 90px auto;
}
.service-page__diff_box{
padding:0 0 5px 0;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.service-page__diff_item{margin:0;width:48.5%;padding:25px 45px 45px 45px;}
.service-page__diff h3{font-size:36px;}
.service-page__diff ul li{font-size:20px;}
.service-page__diff_cost h4{font-size:16px;}
}


.service-page__detail{
margin:0 20px 45px 20px;
}
.service-page__detail h3{
margin:0 0 15px 0;
padding:15px 0 0 0;
font-size:180%;
font-weight:bold;
line-height:120%;
text-align:center;
color:#00979c;
}
.service-page__detail h3 span{
font-size:40%;
font-weight:normal;
color:#666;
letter-spacing:5px;
text-indent:5px;
}
.service-page__detail_box{margin:0 0 45px 0;}
.service-page__detail_pict{}
.service-page__detail_pict img{width:100%;}
.service-page__detail_item{}
.service-page__detail h4{
margin:0;
padding:18px 0 0 0;
font-size:150%;
line-height:150%;
}
.service-page__detail_txt{
padding:15px 0;
font-size:100%;
line-height:200%;
}
.service-page__detail_link{width:100%;margin:0;}
.service-page__detail_link a:link {color:#fff;text-decoration:none;}
.service-page__detail_link a:visited {color:#fff;text-decoration:none;}
.service-page__detail_link a:hover {color:#fff;text-decoration:none;}
.service-page__detail_btn {
display:block;
width:50%;
margin:0 0 0 auto;
padding:14px 15px;
border-radius:6px;
font-size:100%;
box-sizing:border-box;
transition:opacity 0.3s;
background-color:#007b7f;
text-align:center;
}
.service-page__detail_btn:hover {opacity:0.8;}
.service-page__detail_btn .sbarrow {margin-left:15px;}
.service-page__detail_effort{
padding:0 0 15px 0;
font-size:180%;
font-weight:bold;
line-height:150%;
text-align:center;
}
.service-page__detail_eff{
padding:20px 0 0 0;
font-size:130%;
font-weight:bold;
line-height:150%;
color:#00979c;
}
@media screen and (min-width:769px){
.service-page__detail{
max-width:1080px;
width:94%;
margin:0 auto 60px auto;
}
.service-page__detail h3{
margin:0 0 45px 0;
padding:20px 0 15px 0;
font-size:42px;
font-weight:bold;
line-height:120%;
border-bottom:solid 1px #000;
}
.service-page__detail_box{
margin:0 0 60px 0;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.service-page__detail_pict{width:32%;}
.service-page__detail_item{width:62%;}
.service-page__detail h4{padding:0;font-size:28px;}
.service-page__detail_txt{padding:15px 0 30px 0;font-size:20px;}
.service-page__detail_btn {width:40%;font-size:18px;}
.service-page__detail_effort{font-size:36px;}
.service-page__detail_eff{font-size:24px;}
}


.service-page__video_frame{margin:0;}
.service-page__video{
margin:0;
padding:0;
position:relative;
width:100%;
padding-top:56.25%;
}
.service-page__video iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}
@media screen and (min-width:769px){
.service-page__video_frame{width:768px;margin:0 auto;}
}



.service-page__flink {
display:flex;
gap:20px;
max-width:1180px;
margin:0 auto;
padding:20px;
}
.service-page__flink a:link {color:#fff;text-decoration:none;}
.service-page__flink a:visited {color:#fff;text-decoration:none;}
.service-page__flink a:hover {color:#fff;text-decoration:none;}
.service-page__flink_nav {
flex:1;
height:180px;
border-radius:90px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#fff;
position:relative;
overflow:hidden;
background-size:cover;
background-position:center;
background-blend-mode:overlay;
background-color:rgba(0, 0, 0, 0.4);
transition:opacity 0.3s ease, transform 0.3s ease;
}
.service-page__flink_nav.sp_case { background-image:url('https://www.lstepoffcial.com/wp-content/uploads/2023/06/footer_link2.jpg'); }
.service-page__flink_nav.sp_staff { background-image:url('https://www.lstepoffcial.com/wp-content/uploads/2023/06/footer_link3.jpg'); }
.service-page__flink_nav.sp_faq { background-image:url('https://www.lstepoffcial.com/wp-content/uploads/2023/06/footer_link4.jpg'); }
.service-page__flink_nav:hover {opacity:0.85;transform:translateY(-2px);}
.service-page__flink_txt {
text-align:center;
display:flex;
flex-direction:column;
gap:8px;
}
.service-page__flink_nav .sp_en {font-family:"serif", serif;font-size:24px;letter-spacing:0.3em;font-weight:500;}
.service-page__flink_nav .sp_jp {font-size:18px;letter-spacing:0.15em;font-weight:400;}
@media (max-width:768px) {
.service-page__flink {flex-direction:column;}
.service-page__flink_nav {flex:none;height:120px;border-radius:60px;}
}


.service-page__staff{
margin:45px 20px 60px 20px;
}
.service-page__staff h3{
margin:0 0 20px 0;
font-size:150%;
font-weight:bold;
line-height:150%;
text-align:center;
}
@media screen and (min-width:769px){
.service-page__staff{
max-width:1080px;
width:94%;
margin:60px auto 90px auto;
text-align:center;
}
.service-page__staff h3{margin:0 0 30px 0;font-size:36px;}
}



.service-page__flow {
margin:0 20px 60px 20px;
}
.service-page__flowbox {
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
.service-page__flow_item {
background-color:#fff;
border:1px solid #00979c;
border-radius:12px;
padding:20px;
width:100%;
box-sizing:border-box;
display:flex;
align-items:center;
gap:20px;
position:relative;
}
.service-page__flow_icon-wrap {
display:flex;
flex-direction:column;
align-items:center;
flex-shrink:0;
}
.service-page__flow_step {
background-color:#00979c;
color:#fff;
font-size:13px;
font-weight:bold;
padding:4px 16px;
border-radius:20px;
letter-spacing:0.05em;
margin-bottom:12px;
white-space:nowrap;
}
.service-page__flow_icon {
width:155px;
height:155px;
object-fit:contain;
}
.service-page__flow_content {flex-grow:1;}
.service-page__flow h3 {
font-size:24px;
font-weight:bold;
margin:0 0 12px 0;
padding-bottom:8px;
border-bottom:1px dashed #ccc;
font-weight:bold;
}
.service-page__flow_txt {
font-size:16px;
line-height:180%;
margin:0;
text-align:left;
}
.service-page__flow_arrow {
width:12px;
height:12px;
border-right:3px solid #00979c;
border-bottom:3px solid #00979c;
transform:rotate(45deg);
margin:4px 0;
}
.service-page__flow ul{
margin:0 auto;
padding:20px 0 5px 0;
list-style:none;
width:fit-content;
}
.service-page__flow ul li{
margin:0;
padding:6px 0 0 28px;
font-size:120%;
font-weight:bold;
line-height:150%;
position:relative;
}
.service-page__flow ul li:before {
display:block;
font-family:"Font Awesome 5 Free";
font-weight: 900;
content:'\f058';
color:#00979c;
position:absolute;
left:0;
}
@media (min-width:768px) {
.service-page__flow {
max-width:1180px;
width:94%;
margin:0 auto 90px auto;
}
.service-page__flowbox {
flex-direction:row;
align-items:stretch;
justify-content:space-between;
gap:0;
}
.service-page__flow_item {
flex-direction:column;
justify-content:flex-start;
align-items:center;
flex:1;
text-align:center;
padding:24px 16px;
}
.service-page__flow_content {width:100%;}
.service-page__flow_arrow {
transform:rotate(-45deg);
margin:0 12px;
align-self:center;
flex-shrink:0;
}
.service-page__flow ul{padding:30px 0 5px 0;}
.service-page__flow ul li{padding:6px 0 0 32px;font-size:24px;}
}


.price-table{width:100%;border-collapse:collapse;background:#fff;}
.price-table th{background:#00979c;color:#fff;font-weight:700;padding:16px 20px;text-align:center;font-size:18px;}
.price-table td{padding:20px;border-bottom:1px solid #ddd;font-size:18px;}
.price-table tbody tr:nth-child(even){background:#f5f6f6;}
.price-table td:nth-child(1){font-weight:700;font-size:21px;white-space:nowrap;}
.price-table td:nth-child(2){text-align:center;font-weight:700;font-size:24px;white-space:nowrap;}
.price-table td:nth-child(3){color:#333;}
@media(max-width:768px){
.price-table thead{display:none;}
.price-table,.price-table tbody,.price-table tr,.price-table td{display:block;width:100%;}
.price-table tr{border:1px solid #ddd;border-radius:8px;margin-bottom:16px;overflow:hidden;background:#fff;}
.price-table tbody tr:nth-child(even){background:#fff;}
.price-table td{padding:10px 16px;border-bottom:none;text-align:left!important;white-space:normal!important;}
.price-table td:nth-child(1){background:#00979c;color:#fff;font-size:120%;padding:14px 16px;}
.price-table td:nth-child(2){border-top:1px solid #eee;font-size:150%;}
.price-table td:nth-child(2)::before{content:"料金：";font-size:80%;font-weight:400;color:#888;}
.price-table td:nth-child(3){border-top:1px solid #eee;font-size:100%;}
.price-table td:nth-child(3)::before{content:"おすすめ：";display:block;font-size:90%;color:#888;margin-bottom:4px;}
}

.sbbtn-group {
display:flex;
flex-direction:column;
gap:15px;
margin:0 auto;
}
.sbbtn-group-1{width:80%;margin-top:45px;}
.sbbtn-group-1s{width:80%;}
.sbbtn-group-2{width:100%;}
.sbbtn-group a:link {text-decoration:none;}
.sbbtn-group a:visited {text-decoration:none;}
.sbbtn-group a:hover {text-decoration:none;}
.sbbtn {
display:flex;
justify-content:center;
align-items:center;
padding:18px 20px;
border-radius:4px;
text-decoration:none;
font-size:100%;
box-sizing:border-box;
transition:opacity 0.3s;
}
.sbbtn:hover {opacity:0.8;}
.sbbtn .sbarrow {margin-left:15px;}
.sbbtn-primary {
background-color:#007b7f;
color:#fff;
border:1px solid #007b7f;
}
.sbbtn-group a.sbbtn-primary,
.sbbtn-group a.sbbtn-primary:visited,
.sbbtn-group a.sbbtn-primary:link {
color:#fff;
}
.sbbtn-secondary {
background-color:#fff;
color:#007b7f;
border:1px solid #007b7f; 
}
.sbbtn-group a.sbbtn-secondary,
.sbbtn-group a.sbbtn-secondary:visited,
.sbbtn-group a.sbbtn-secondary:link {
color:#007b7f;
}
@media (min-width:768px) {
.sbbtn-group {flex-direction:row;}
.sbbtn {flex:1;font-size:18px;}
.sbbtn-group-1{width:420px;}
.sbbtn-group-1s{width:80%;}
.sbbtn-group-2{width:768px;}
}



