@charset "UTF-8";
/* CSS Document */
/*--------------------
01.top
02.beta
03.alpha
04.telework
05.two_factor
01.sastik3
02.cs
03.saswall3server
04.news_detail
05.news
06.example_detail
07.example
08.document_request
09.free_trial
10.inquiry
11.send
12.company
13.copyright
14.privacy
15.information_security
--------------------*/

@media only screen and (max-width:1024px){


/*----------
01.top
----------*/
#top .mv_slider .text_box{
top: 10%;
bottom: auto;
}
#top .mv_slider .catch{
font-size: 24px;
}
#top .mv_slider .slide_text span{
font-size: 16px;
}
#top .sec_02 #news_slider .slick-slide{
max-width: none;
margin: 15px 0.7%;
}

#top .sec_02 #news_slider .slick-arrow{
left: 12%;
}

#top .sec_02 #news_slider .slick-arrow.next{
right: 12%;
}
#top .sec_03 h3{
font-size: 18px;
}
#top .sec_05{
padding: 94px 0 0;
}
#top .sec_05 .cnt_flex{
margin: 0 0 0 -20px;
}
#top .sec_05 .cnt_flex .font18_text{
font-size: 15px;
}
#top .sec_05 .cnt_box{
margin: 0 0 130px 20px;
width: calc(100%/2 - 20px);
}
#top .sec_05 .top_box{
width: 95%;
}
#top .sec_05 .title02{
margin: 0 auto 60px;
}
#top .sec_05 .under_box p{
font-size: 14px;
}
#top .sec_06 .cnt_g01 .flex_box h4{
font-size: 16px;
line-height: 26px;
}
#top .sec_06 .cnt_g02 .cnt_img{
transform: translateX(35px);
}
#top .sec_06 .cnt_g02 h3::before{
margin: 0 10px 0 0;
}
#top .sec_06 .cnt_g02 h3::after{
margin: 0 0 0 10px;
}
#top .sec_06 .cnt_g03{
transform: none;
}
#top .sec_06 .cnt_g03 .cnt_in{
width: 100%;
}
#top .sec_06 .cnt_g03 .cnt_wrap{
align-items: flex-end;
}
#top .sec_06 .cnt_g03 .r_box{
padding: 0 0 10px;
}
#top .sec_06 .cnt_g03 h3{
font-size: 20px;
}
#top .sec_06 .cnt_g03 .btn01{
max-width: 200px;
}
#top .sec_06 .cnt_g03 .btn01 a{
padding: 16px 0;
}
#top .sec_07 .box_l{
padding: 0 2%;
}
#top .sec_07 .cnt_text{
font-size: 14px;
}
#top .sec_07 .btn02{
max-width: 250px;
}
#top .sec_08 .cnt_wrap{
flex-direction: column;
}
#top .sec_08 .l_box{
width: 100%;
}
#top .sec_08 .r_box{
width: 100%;
padding: 0;
}
/*----------
02.beta
----------*/
#beta .sec_02 .lead_box h3{
font-size: 22px;
line-height: 20px;
}
#beta .sec_02 .lead_box .lead{
font-size: 14px;
}
#beta .sec_03 .cnt_wrap .font18_text{
font-size: 14px;
}
/*----------
03.alpha
----------*/
#alpha .sec_05 h2{
font-size: 18px;
}
/*----------
04.telework
----------*/
#telework .sec_01 .cnt_img{
width: 521px;
}
#telework .sec_01 .font22_text{
line-height: 30px;
}
/*----------
05.two_factor
----------*/
#two_factor .sec_02 .flex_box{
flex-direction: column;
align-items: center;
margin: 0 auto;
max-width: 600px;
}
#two_factor .sec_02 .cnt_text{
margin: 0 auto 30px;
width: 100%;
}
#two_factor .sec_02 .img02{
margin: 0 auto;
width: 100%;
}
#two_factor .sec_03 .cnt_box{
width: 93%;
}
/*----------
01.sastik3
----------*/
#sastik3 .sec_01 .pc_flex figure{
margin-right: 7.5vw;
}
#sastik3 .sec_02{
padding-bottom: 9vw;
}
#sastik3 .sec_03{
padding: 6.5vw 0 16vw;
}
.white_box{
border-radius: 0.5vw;
padding: 15px;
}
#sastik3 .sec_03 .pc_flex.with_arrow::before{
width: 5.5vw;
height: 1.3vw;
}
/* .with_chara::before{
width: 17.5vw;
height: 17.5vw;
top: -1.2vw;
right: 1.7vw;
} */
.with_chara::before{
width: 15vw;
height: 15vw;
top: 10vw;
right: 10px;
}
#sastik3 .sec_04{
padding: 7.2vw 0 7.6vw;
}

/*----------
02.cs
----------*/
#cs .sec_02 .white_box {
padding: 5.4vw 8vw 6vw;
}
#cs .sec_03 .bg_link .bg_link_inner{
padding: 3vw 3vw 6vw 3vw;
}
#cs .sec_03 .bg_link .font24_text{
font-size: 18px;
}
#cs .sec_03 .bg_link .btn02{
width: 70%;
}

/*----------
03.saswall3server
----------*/
#saswall3server .sec_02{
padding-top: 6.4vw;
}
#saswall3server .white_box{
padding: 5vw 5vw 6vw;
}
#saswall3server .sec_03{
height: 24vw;
padding: 5vw 0;
}
#saswall3server .sec_03 figure{
width: 14vw;
margin: 0 12.5vw 0 5.2vw;
}
#saswall3server .sec_04{
padding: 0 0 8.5vw;
}
#saswall3server .sec_04 .img-middle{
width: 57vw;
}
#saswall3server .sec_02 .title02{
font-size: 20px;
line-height: 32px;
}

/*----------
04.news_detail
----------*/
#news_detail #title_area h1{
font-size: 24px;
}
#news_detail #title_area h1 span.date{
font-size: 14px;
}
#news_detail .sec_01{
padding-bottom: 9.4vw;
}
#news_detail .sec_01 h2{
margin: 6vw auto 3vw;
}
#news_detail .sec_01 .news_link{
padding-top: 10vw;
}
#news_detail .sec_01 .news_link .flex_wrap a{
padding: 0.5vw 0 0.3vw;
}
#news_detail .sec_01 .news_link a.prev{
margin-right: 8vw;
}
#news_detail .sec_01 .news_link .btn01{
margin: 6.5vw auto 0;
}

/*----------
06.example_detail
----------*/
#example_detail #title_area .contents_in{
padding-top: 3.4vw;
}
#example_detail #title_area h1{
margin-bottom: 3.7vw;
}
#example_detail #title_area h1 .blue_bg{
padding: 0.4vw 1.7vw 0.8vw 2vw;
margin-bottom: 0.6vw;
}
#example_detail #title_area .logo{
width: 18vw;
margin-bottom: 3.4vw;
}
#example_detail #title_area .example_img{
width: 100%;
}
#example_detail #title_area .example_img .white_box{
padding: 2.4vw 4.7vw 1.3vw;
}
#example_detail .sec_01{
padding-bottom: 7.8vw;
}
#example_detail .name_box + .name_box{
padding-left: 2.4vw;
margin-left: 2.4vw;
}
#example_detail .name_box .position{
margin-right: 2.4vw;
}
#example_detail .example_content h2{
padding-left: 1.5vw;
margin-bottom: 2.8vw;
}
#example_detail .example_content p{
margin-bottom: 6vw;
}
#example_detail .example_content pre{
font-size: 14px;
line-height: 21px;
letter-spacing: 0.05em;
margin-bottom: 50px;
}
#example_detail .example_content img{
margin-bottom: 6vw;
}
#example_detail .sec_02{
padding-bottom: 13.4vw;
}
#example_detail .sec_02 .prof_title{
padding: 8px 10px 10px;
margin-bottom: 15px;
}
#example_detail .sec_02 .prof_company{
margin-right: 10.6vw;
}
#example_detail .sec_02 .prof_company img{
width: 18vw;
margin-bottom: 2.8vw;
}
#example_detail .sec_02 .prof_company p{
width: 40vw;
}
#example_detail .sec_02 .prof_people .person_each + .person_each{
margin-top: 15px;
}
#example_detail .sec_02 .prof_people img{
width: 10vw;
height: 10vw;
border-radius: 5vw;
margin-right: 4.3vw;
}
#example_detail .sec_02 .prof_people .position{
margin-right: 1.6vw;
}
#example_detail .sec_03{
padding-bottom: 13.8vw;
}
#example_detail li.slider_card figure{
height: 24vw;
}
#example_detail li.slider_card figure img{
border-radius: 0.5vw;
}
#example_detail li.slider_card .slider_txt p {
padding-left: 3.2vw;
}

/*----------
07.example
----------*/
#example .sec_01{
padding: 5.2vw 0 6.5vw;
}
#example .sec_01 .white_box{
padding: 3vw 5vw;
}
#example .sec_01 .white_box h3{
width: 16vw;
min-width: 4em;
}
#example .sec_01 .white_box table td{
padding: 0.8vw 0 0.9vw;
}
#example .sec_02{
padding: 6vw 0 7.3vw;
}
/*----------
10.inquiry
----------*/
#inquiry h2.title01.left{
margin-bottom: 5vw;
}
#inquiry .white_box{
padding: 4vw 6.2vw;
}
#inquiry .mwform-zip-field {
margin-bottom: 1.3vw;
}

/*----------
11.send
----------*/
#send .sec_01{
padding: 8vw 0;
}
#send .white_box{
padding: 7vw 6.2vw 6.5vw;
}
#send .form .btn01.center a::after{
left: 2.2vw;
}
#send .white_box h3{
padding-bottom: 0.5vw;
margin-bottom: 0.5vw;
}

/*----------
12.company
----------*/
#company .sec_01{
padding: 8vw 0 7vw;
}
#company .white_box{
padding: 6vw;
}
#company .detail_box dl{
padding: 1.8vw 0;
}
#company .detail_box dl dt{
width: 15vw;
margin-right: 3.2vw;
}
#company .detail_box dl dd .right{
width: 11.7vw;
}
#company .detail_box dl dt.align_self_top{
margin-top: 0.4vw;
}
#company .detail_box dl dd span{
margin-right: 4.2vw;
}
#company .detail_box dl dd dl{
padding: 0.8vw 0;
}
#company .detail_box dl dd dl dt{
padding-right: 1vw;
margin-right: 1.4vw;
width: 11vw;
}
#company .detail_box dl dd dl dd img{
width: 18vw;
}
#company .recruit_top{
width: 94vw;
margin-left: -6vw;
}
#company .recruit_txt_blue{
padding: 3vw 6vw;
}
#company .recruit_top .recruit_txt_blue.top{
position: relative;
top: unset;
left: unset;
}
#company .recruit_txt_blue.bottom{
width: 94vw;
margin-left: -6vw;
padding: 3vw 4vw;
}
#company .detail_box h3{
padding: 0.7vw 0;
}
#company .white_box .pc_flex{
margin-top: 4vw;
padding-top: 4vw;
}
#company .white_box .pc_flex img{
width: 23.3vw;
}
#company .white_box .pc_flex dl{
padding: 0.8vw 0;
}
#company .white_box .pc_flex img {
width: 60%;
margin: 3vw auto 0;
}
}


@media only screen and (max-width:850px){
.with_chara::before{
top: 15vw;
right: -3vw;
}
}



@media only screen and (max-width:750px){
/*----------
01.top
----------*/
#top .mv_slider.pc{
display: none;
}
#top .mv_slider.sp{
display: block;
}
#top .mv_slider .text_box{
padding: 20px 0 31px;
top: 0;
bottom: auto;
height: 100%;
}
#top .sec_05 .font18_text.ty10{
transform: none;
}
#top .mv_slider .catch{
margin: 0 0 8px;
padding: 0 15px 0 10px;
font-size: 20px;
line-height: 40px;
}
#top .mv_slider .slide_text span{
padding: 4px 17px 4px 10px;
font-size: 14px;
line-height: 23px;
}
#top .mv_slider .btn01{
position: absolute;
right: auto;
left: 0;
bottom: 15%;
}
#top .mv_slider .btn01 a{
white-space: nowrap;
display: inline;
}
#top .sec_01 .cnt_text{
margin: 0 auto 25px;
}
#top .sec_01 ul{
margin: 0 auto;
}
#top .sec_01 li{
margin: 0 auto;
width: 100%;
}
#top .sec_02{
padding: 49.5px 0 0;
}
#top .sec_02 #news_slider .slick-slide{
margin: 12px 30px;
}

#top .sec_02 #news_slider .slick-arrow{
left: 0;
}

#top .sec_02 #news_slider .slick-arrow.next{
right: 0;
}

#top .sec_03{
padding: 74px 0 0;
}
#top .sec_03 .title01{
margin: 0 auto 25.5px;
}
#top .sec_03 #model .cnt_img{
margin-bottom: 15px;
}
#top .sec_03 #model .text{
color: #000;
}
#top .sec_04{
padding: 15px 0 0;
}
#top .sec_05{
padding: 50px 0 113px;
}
#top .sec_05 .title02{
margin: 0 0 30px;
font-size: 22px;
line-height: 35px;
}
#top .sec_05 .cnt_flex{
flex-direction: column;
margin: 0;
}
#top .sec_05 .cnt_box{
margin: 0 auto 162px;
width: 100%;
}
#top .sec_05 .cnt_box:last-of-type{
margin-bottom: 0;
}
#top .sec_05 .top_box{
width: calc(100% - 30px);
}
#top .sec_05 .top_box .title01{
margin: 0 auto 15px;
font-size: 20px;
letter-spacing: 0.05em;
line-height: 28px;
}
#top .sec_05 .top_box .title01::after{
margin: 11px auto 0;
width: 34px;
}
#top .sec_05 .under_box{
padding: 104.5px 15px 59px;
}
#top .sec_05 .cnt_img{
margin: 0 0 20px;
}
#top .sec_05 .btn02{
width: 100%;
}
#top .sec_05 .option{
width: 25%;
right: -10px;
}
#top .sec_05 #telework .cnt_img{
width: 90%;
margin: 0 auto 20px;
}


#top .sec_05 .box04 .cnt_img{
width: 73%;
margin: 0 auto 20px;
}

#top .sec_05 .option{
height: 105px;
width: 105px;
right: -25px;
top: 15px;
}
#top .sec_06{
padding: 47px 0 0 0;
}
#top .sec_06 .title01{
margin-bottom: 31px;
}
#top .sec_06 .title02{
margin-bottom: 15px;
font-size: 18px;
line-height: 28px;
}
#top .sec_06 .first_text{
margin-bottom: 21px;
font-size: 18px;
letter-spacing: 0.03em;
}
#top .sec_06 .cnt_g01{
margin-bottom: 31px;
}
#top .sec_06 .cnt_g01 .flex_box{
flex-direction: column;
margin: 0;
}
#top .sec_06 .cnt_g01 .flex_box .cnt_box a{
display: flex;
}
#top .sec_06 .cnt_g01 .flex_box .cnt_box{
margin: 0 auto 20px;
padding: 10px 0 10px 10px;
width: 100%;
}
#top .sec_06 .cnt_g01 .flex_box .cnt_img{
margin: 0;
width: 35%;
}
#top .sec_06 .cnt_g01 .flex_box .text_box{
padding-left: 8px;
width: 65%;
}
#top .sec_06 .cnt_g01 .flex_box h4{
margin-bottom: 8.5px;
}
#top .sec_06 .cnt_g02{
padding: 31px 0 27px;
}
#top .sec_06 .cnt_g02 li{
margin: 0 7.5px 15px;
font-size: 18px;
}
#top .sec_06 .cnt_g02 li.sp{
display: inline-block;
}
#top .sec_06 .cnt_g02 li.pc{
display: none;
}
#top .sec_06 .cnt_g02 .cnt_box02{
flex-direction: column-reverse;
margin: 0 auto;
width: calc(100% - 54px);
transform: none;
}
#top .sec_06 .cnt_g02 .text_box{
margin: 0 auto 21px;
padding: 0;
text-align: center;
}
#top .sec_06 .cnt_g02 .cnt_img{
margin: 0 auto;
width: 41%;
transform: none;
}
#top .sec_06 .cnt_g03{
padding-bottom: 28px;
}
#top .sec_06 .cnt_g03 .cnt_wrap{
display: block;
}
#top .sec_06 .cnt_g03::before{
width: 100%;
height: 114px;
}
#top .sec_06 .cnt_g03 .cnt_img{
margin: 0 0 23px;
width: calc(100% - 15px);
}
#top .sec_06 .cnt_g03 .r_box{
margin: 0 auto;
width: calc(100% - 60px);
}
#top .sec_06 .cnt_g03 h3{
margin-bottom: 18px;
font-size: 23px;
line-height: 34px;
}
#top .sec_06 .cnt_g03 .btn01{
margin-bottom: 18px;
max-width: 300px;
}
#top .sec_06 .cnt_g03 .btn01 a{
padding: 23px 0;
font-size: 20px;
}
#top .sec_06 .cnt_g03 .btn01 a::after{
right: 20px;
}
#top .sec_06 .cnt_g03 .parts_img{
width: 39%;
top: 8.1%;
right: 30px;
bottom: auto;
left: auto;
transform: none;
}
#top .sec_07{
padding: 53px 0 0;
}
#top .sec_07 .cnt_in{
flex-direction: column;
}
#top .sec_07 .box_l{
margin: 0 0 30px;
padding-left: 10%;
width: 100%;
}
#top .sec_07 .box_l .title01{
margin-top: 0;
}
#top .sec_07 .cnt_text{
margin: 0 0 52px;
}
#top .sec_07 .btn02{
max-width: 300px;
}
#top .sec_07 .box_r{
width: 100%;
}
#top .sec_08{
padding: 50px 0 0;
}
#top .sec_08 .cnt_in{
width: 100%;
}
#top .sec_08 .cnt_wrap{
margin-bottom: 35px;
padding: 0 15px;
}
#top .sec_08 .l_box{
padding: 0 15px;
}
#top .sec_08 .r_box{
margin-bottom: 0;
}
#top .sec_08 li{
padding: 15px 15px 21px;
}
#top .sec_08 li a{
display: block;
}
#top .sec_08 li:first-of-type{
padding-top: 0;
}
#top .sec_08 li:last-of-type{
margin-bottom: 0;
}
#top .sec_08 .title01.left{
margin: 0 0 24.5px;
}
#top .sec_08 .day{
font-size: 12px;
vertical-align: middle;
}
#top .sec_08 .day span{
display: inline-block;
margin: 0 0 0 5px;
vertical-align: middle;
}
#top .sec_08 .title{
line-height: 21px;
max-width: 282px;
}
#top .sec_09{
padding: 50px 0 0;
}
/*----------
02.beta
----------*/
#beta .title01{
font-size: 20px;
}
#beta .title01::after{
margin: 12.5px auto 0;
}
#beta .sec_01{
padding: 34.2% 0 14.6px;
}
#beta .sec_01 .title01{
margin: 0 auto 23px;
}
#beta .sec_01 .first_text{
margin: 0 auto 12px;
font-size: 16px;
line-height: 24px;
}
#beta .sec_01 .cnt_wrap{
margin: 0 auto 12.5px;
}
#beta .sec_01 .font22_text{
padding: 0 15px 0;
}
#beta .sec_02 .contents_in{
width: 84%;
}
#beta .sec_02 .first_text{
margin: 0 auto 22.5px;
}
#beta .sec_02 .cnt_wrap{
padding: 207px 0 0;
}
#beta .sec_02 .cnt_wrap::before,
#beta .sec_02 .cnt_wrap::after{
width: 92%;
background-image: url(../img/beta/pic01_sp.jpg);
}
#beta .sec_02 .g2 .cnt_wrap::before{
background-image: url(../img/beta/pic03_sp.jpg);
}
#beta .sec_02 .cnt_wrap::after{
background-image: none;
}
#beta .sec_02 .lead_box{
top: 15.5%;
left: 8%;
}
#beta .sec_02 .lead_box h3{
font-size: 16px;
}
#beta .sec_02 .lead_box .lead.pc{
display: none;
}
#beta .sec_02 .lead_box .lead{
margin: 0 0 5px;
}
#beta .sec_02 .g1 .cnt_img,
#beta .sec_02 .g2 .cnt_img{
margin: 0 auto 23.5px;
width: 100%;
}
#beta .sec_02 .cnt_g .font18_text{
margin: 0 auto 23px;
font-size: 12px;
}
#beta .sec_02 .g1 .cnt_box{
padding: 49px 0 112px;
}
#beta .sec_02 .g2 .cnt_wrap{
padding: 223px 0 0;
}
#beta .sec_02 .g2 .lead_box{
top: 12%;
right: 4%;
left: auto;
}
#beta .sec_02 .g2 .cnt_box{
padding: 39px 0 67.5px;
}
#beta .sec_02 .g2 .text1{
margin: 0 auto 32px;
font-size: 14px;
letter-spacing: 0.03em;
line-height: 22px;
}
#beta .sec_02 .g2 .text2{
margin: 0 auto 32px;
font-size: 14px;
line-height: 22px;
}
#beta .sec_02 .g2 .btn01 a{
padding: 26px 0;
}
#beta .sec_03{
padding: 83.5px 0 20px;
}
#beta .sec_03 .contents_in{
width: 92%;
}
#beta .sec_03 .title02{
margin: 0 auto 56px;
font-size: 20px;
line-height: 32px;
}
#beta .sec_03 .title02 span{
font-size: 22px;
}
#beta .sec_03 .title01{
margin: 0 auto 24px;
}
#beta .sec_03 .title03{
margin: 0 0 37px;
}
#beta .sec_03 .flex_box{
flex-direction: column;
}
#beta .sec_03 .img_box{
padding: 10px 15px;
}
#beta .sec_03 .cnt_wrap .font18_text{
margin: 0 auto 3px;
font-size: 16px;
}
#beta .sec_03 .box1,
#beta .sec_03 .box2{
margin: 0 auto 66px;
width: 100%;
}
#beta .sec_03 .box3 .img_box{
padding: 28px 20px 13px;
}
#beta .sec_04 .title01{
margin: 0 auto 34.5px;
}
#beta .sec_04 .contents_in{
width: 92%;
}
#beta .sec_05{
padding: 98px 0 0;
}
#beta .sec_05 .title02{
margin: 0 0 28px;
font-size: 22px;
line-height: 36px;
}
#beta .sec_05 .cnt_flex{
flex-direction: column-reverse;
}
#beta .sec_05 .cnt_box{
width: 100%;
}

#beta .sec_05 .l_box{
padding: 0;
}
#beta .sec_05 .r_box{
margin: 0 auto 44px;
padding: 13px 0;
}
#beta .sec_05 .r_box .cnt_img{
width: 75.5%;
}
#beta .sec_05 dd{
padding-left: 11px;
}
#beta .sec_06{
padding: 76.5px 0 0;
}
/*----------
03.alpha
----------*/
#alpha #title_area .cnt_wrap::after {
background-image: url(../img/alpha/title_sp.jpg);
}
#alpha .sec_01 {
padding: 34.2% 0 0;
}
#alpha .title01 {
font-size: 20px;
}
#alpha .title02 {
font-size: 24px;
line-height: 36px;
}
#alpha .title01::after{
margin: 12.5px auto 0;
}
#alpha .sec_01 .font18_text{
margin: 0 auto 30px;
}
#alpha .sec_01 .flex_box{
flex-direction: column;
}
#alpha .sec_01 .flex_box .cnt_text{
margin: 0 auto 25px;
width: 100%;
text-align: center;
}
#alpha .sec_01 .flex_box .cnt_img{
width: 100%;
}
#alpha .sec_02{
padding: 80px 0 30px;
}
#alpha .sec_02 .title03{
font-size: 16px;
}
#alpha .sec_02 .flex_box{
flex-direction: column;
}
#alpha .sec_02 .flex_box .cnt_box{
margin: 0 auto 30px;
width: 100%;
}
#alpha .sec_02 .flex_box .cnt_box:last-of-type{
margin: 0 auto;
}
#alpha .sec_02 .g03 .cnt_img{
width: 80%;
}
#alpha .sec_04 .cnt_flex{
flex-direction: column;
}
#alpha .sec_04 .cnt_box{
width: 100%;
}
#alpha .sec_04 .l_box{
margin: 0 auto 120px;
}
#alpha .sec_04 .cnt_flex::after{
background-image: url(../img/alpha/parts2.png);
height: 77px;
width: 12px;
top: 50%;
}
#alpha .sec_05 .contents_in{
width: 100%;
}
#alpha .sec_05 h2{
font-size: 14px;
line-height: 26px;
}
#alpha .sec_05 .btn02{
max-width: 250px;
}
#alpha .sec_05 .btn02 a{
padding: 0;
font-size: 14px;
}
/*----------
04.telework
----------*/
#telework #title_area #breadcrumb{
flex-wrap: wrap;
}
#telework #title_area .cnt_wrap::after{
background-image: url(../img/telework/title_sp.jpg);
top: 66%;
}
#telework .title01{
font-size: 20px;
}
#telework .sec_01{
padding: 34% 0 57px;
}
#telework .sec_01 .cnt_img{
width: 90%;
}
#telework .sec_02{
padding: 40px 0 0;
}
#telework .sec_03 .flex_box{
flex-direction: column;
}
#telework .sec_03 .cnt_g{
width: 100%;
}
#telework .sec_03 .l_g{
margin: 0 auto 40px;
}
#telework .sec_03 h3{
font-size: 20px;
}
#telework .sec_03 .font14_text{
font-size: 12px;
}
#telework .sec_05 .title02{
font-size: 22px;
line-height: 36px;
}
#telework .sec_05 .g01 .cnt_box .cnt_data,#telework .sec_05 .g02 .cnt_box .cnt_data{
margin-top: 0;
}
#telework #more h2{
font-size: 14px;
}
/*----------
05.two_factor
----------*/
#two_factor #breadcrumb li a{
font-size: 10px;
}
#two_factor #title_area h1{
font-size: 20px;
}
#two_factor .sec_02 .btn01 a::after{
right: 15px;
}
#two_factor .sec_02 .cnt_box .cnt_img{
width: 84%;
  }
#two_factor .cnt_wrap::after {
background-image: url(../img/two_factor/title_sp.jpg);
top: 66%;
}
#two_factor .title01 {
font-size: 20px;
}
#two_factor .sec_01 {
padding: 34.2% 0 0;
}
#two_factor .sec_01 .title01{
margin: 0 auto 30px;
}
#two_factor .sec_01 .flex01{
flex-direction: column-reverse;
padding: 37px 20px 28.5px;
}
#two_factor .sec_01 .cnt_text{
width: 100%;
}
#two_factor .sec_01 .cnt_img{
margin: 0 auto 30px;
width: 90%;
}
#two_factor .sec_02 .first_text{
font-size: 14px;
}
#two_factor .sec_02 .font24_text{
font-size: 20px;
}
#two_factor .sec_02 .flex_box{
padding: 40px 15px;
}
#two_factor .sec_02 .img02{
padding: 10px;
}
#two_factor .sec_03 .cnt_box{
padding: 30px 0 0;
}
#two_factor .sec_03 .cnt_box .font18_text{
font-size: 14px;
}
#two_factor .sec_03 .cnt_box .font24_text{
margin: 0;
font-size: 20px;
line-height: 32px;
letter-spacing: 0;
}
#two_factor .sec_03 .btn02{
max-width: 270px;
}
#two_factor .sec_03 .btn02 a{
font-size: 14px;
line-height: 40px;
}
#two_factor .sec_03 .cnt_wrap{
background-image: url(../img/two_factor/bg_sp.jpg);
}
/*----------
01.sastik3
----------*/
#sastik3 #title_area .cnt_wrap::after {
background-image: url(../img/alpha/sastik3/pic01_sp.jpg);
}
#sastik3 .sec_01{
padding: 20.7% 0 0;
}
#sastik3 .sec_01 .pc_flex picture,
#sastik3 .sec_01 .pc_flex .font14_text{
width: 100%;
}
#sastik3 #title_area .cnt_wrap {
padding: 38px 0 120px;
}
#sastik3 .sec_01 .contents_in {
width: 84%;
}
#sastik3 .sec_01 .font16_text {
margin-top: -20vw;
margin-bottom: 9.33vw;
}
#sastik3 .sec_01 .pc_flex img{
margin-right: 0;
margin-bottom: 9.33vw;
}
#sastik3 .sec_02 li.slider_card{
max-width: none;
width: auto;
}
#sastik3 .sec_02 li.slider_card .slider_txt{
position: static;
}
#sastik3 .sec_02 li.slider_card .slider_txt h4{
top: 20px;
right: 0px;
left: auto;
width: 180px;
margin: 0 3px 0 0;
}
#sastik3 .sec_02 li.slider_card .font14_text{
max-width: none;
width: 100%;
margin: 21px auto 17px;
}
#sastik3 .sec_02 li.slider_card .more_link{
position: relative;
right: auto;
}
#sastik3 .sec_02 .slick-arrow{
left: 0;
}
#sastik3 .sec_02 .slick-arrow.next{
right: 0;
}
#sastik3 .pc_flex .white_box{
width: 100%!important;
}
#sastik3 .sec_03{
padding-top: 40px;
padding-bottom: 40vw;
}
#sastik3 .sec_03 .title04{
line-height: 24px;
}
#sastik3 .sec_03 .pc_flex.with_arrow::before {
width: 13px;
height: 55px;
background: url(../img/alpha/sastik3/parts02.png) center center no-repeat;
background-size: contain;
top: 108vw;
bottom: unset;
left: 0;
right: 0;
z-index: 10;
}
.with_chara {
width: 100%;
}
.with_chara::before {
top: 110%;
left: 0;
right: 0;
margin: auto;
width: 30vw;
height: 30vw;
}
#sastik3 .sec_04{
padding-bottom: 105px;
}
#sastik3 .sec_04 h2.title01{
font-size: 20px;
line-height: 30px;
}

#sastik3 .sec_04 .slider_card .slider_txt h4{
position: static;
width: 100%;
margin: -10px 0 0;
}

#sastik3 .sec_04 .slider_card .slider_txt .blue_bg{
font-size: 15px;
line-height: 28px;
margin-bottom: 5px;
}

#sastik3 .sec_03 .font18_text:last-of-type {
font-size: 16px;
}


/*----------
02.cs
----------*/
#cs #title_area .title_g .font20_text{
font-size: 10px;
}
#cs .title04{
line-height: 24px;
}
#cs #title_area .cnt_wrap::after {
background-image: url(../img/beta/cs/pic01_sp.jpg);
}
#cs .sec_01{
padding: 19.7% 0 0;
}
#cs #title_area .cnt_wrap{
padding: 38px 0 120px;
}
#cs .sec_01 .font18_text {
margin-top: -32vw;
}
#cs .sec_02 .pc_flex figure{
width: 100%;
}
#cs .sec_03 .bg_link{
width: 100%;
height: 68.8vw;
}
#cs .sec_03 .bg_link .bg_link_inner{
height: 40vw;
}
#cs .sec_03 .bg_link .font24_text {
font-size: 14px;
line-height: 20px;
}
#cs .sec_03 .bg_link .btn02 {
width: 80vw;
}
#cs .sec_03 .bg_link.link2 .font24_text {
font-size: 18px;
line-height: 24px;
}
#cs .sec_03 .bg_link .btn02 a{
padding: 0;
font-size: 14px;
line-height: 45px;
}
/*----------
03.saswall3server
----------*/
#saswall3server .cnt_wrap::after {
background-image: url(../img/two_factor/saswall3server/pic01_sp.jpg);
}
#saswall3server #title_area .cnt_wrap {
padding: 38px 0 120px;
}
#saswall3server .sec_01 .font60_text {
font-size: 34px;
line-height: 30px;
}
#saswall3server .sec_02 h2.title02{
font-size: 16px;
line-height: 24px;
}
#saswall3server .sec_03 {
height: auto;
flex-direction: column;
align-items: center;
padding: 30px 3% 20px;
}
#saswall3server .sec_03 img{
width: 32.8vw;
}
#saswall3server .sec_04 .img-middle{
width: 100%;
}

/*----------
06.example_detail
----------*/
#example_detail #breadcrumb {
position: relative;
margin-bottom: 8vw;
}
#example_detail #title_area h1 .blue_bg {
font-size: 18px;
}
#example_detail #title_area .example_img .white_box {
/* bottom: -10vw; */
position: static;
padding: 10px 0;
width: 94%;
}
#example_detail #title_area .cnt_wrap.no_img{
padding-bottom: 30px;
}
#example_detail #title_area .logo,
#example_detail .sec_02 .prof_company img {
width: 160px;
}
#example_detail .name_box {
justify-content: flex-end;
width: 100%;
margin-left: auto;
margin-right: 0;
}
#example_detail .name_box + .name_box {
padding-left: 0;
border-left: none;
margin-left: auto;
margin-top: 10px;
/* border-top: 1px solid #707070; */
}
#example_detail .example_content img,
#example_detail .sec_02 .prof_company p{
width: 100%;
}
#example_detail .sec_02 .prof_company{
margin-right: 0;
margin-bottom: 15px;
}
#example_detail .sec_02 .prof_people img{
width: 15vw;
height: 15vw;
border-radius: 8vw;
}
#example_detail li.slider_card figure {
width: 100%;
height: 36vw;
}

#example_detail li.slider_card .slider_txt h4{
position: static;
width: 100%;
margin: -15px 0 0;
}

#example_detail li.slider_card .slider_txt p{
padding: 10px 0 0;
}

/*----------
07.example
----------*/
#example .sec_01 .white_box table td {
display: block;
width: 100%;
}
#example .sec_01 .white_box table td:first-child{
border: none;
padding-bottom: 0;
padding-top: 3vw;
}
#example .sec_01 .white_box table td:last-child{
padding-left: 2em;
padding-top: 0;
padding-bottom: 3vw;
}

/*----------
12.company
----------*/
#company .detail_box dl {
display: block;
padding: 4vw 0;
}

#company .detail_box dl dt {
width: auto;
border-left: 1px solid #003388;
margin-bottom: 3vw;
padding-left: 10px;
display: inline-block;
}

#company .detail_box dl dt::before {
content: none;
}

#company .detail_box dl dd {
padding-left: 10px;
}
#company .detail_box dl dd dl dt {
width: auto;
margin-bottom: 0;
}
#company .white_box .pc_flex dl {
margin-top: 2vw;
}
#company .white_box .pc_flex img{
margin-top: 0;
}
#company .white_box p{
line-height: 1.4;
}
/*----------
16.sitemap
----------*/
#sitemap .sec_01{
padding-top: 0;
}

#sitemap .sec_01 .narrow{
display: block;
}

#sitemap .sec_01 .narrow .cnt_left, #sitemap .sec_01 .narrow .cnt_right{
width: 100%;
padding: 0;
}
#sitemap .sec_01 .big{
font-size: 16px;
margin-left: 12px;
}

#sitemap .sec_01 .big::before{
border-left-width: 6px;
border-top-width: 3px;
border-bottom-width: 3px;
left: -12px;
}

#sitemap .sec_01 ul{
display: flex;
align-items: start;
flex-wrap: wrap;
}

#sitemap .sec_01 ul li{
width: 50%;
margin: 0 0 20px;
font-size: 16px;
}

#sitemap .sec_01 .big + ul{
margin: 15px 0 10px 12px;
}

#sitemap .sec_01 .big + ul li{
margin-bottom: 18px;
}

#sitemap .sec_01 ul:nth-of-type(3) li{
width: 100%;
}

#sitemap .sec_01 .cnt_right ul li:nth-of-type(7),#sitemap .sec_01 .cnt_right ul li:nth-of-type(8){
width: 100%;
}
#copyright #title_area .cnt_wrap.no_img{
padding-bottom: 10px;
}

}
@media only screen and (max-width:400px){
#model .cnt_img{
width: 67%;
}
}
@media only screen and (max-width:325px){
/*----------
01.top
----------*/
#top .sec_06 .cnt_g02 h3{
font-size: 16px;
}
#top .sec_07 .box_l{
padding: 0 10px;
}
#top .sec_06 .cnt_g01 .flex_box h4{
font-size: 14px;
}
/*----------
03.alpha
----------*/
/*----------
04.telework
----------*/
/*----------
05.two_factor
----------*/
#two_factor .sec_02 .cnt_box + .font18_text{
font-size: 12px;
}
}