@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------
	Universal Style
------------------------------------------------------------------------------------------------------------------------*/
html{font-size:62.5%;}
body{
background:#fff;
color:#000;
font-family:'Open Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Osaka,sans-serif;
-webkit-text-size-adjust:100%;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section{
display:block;
}
html,body,div,
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section,
h1,h2,h3,h4,h5,h6,
p,dl,dt,dd,ul,ol,li,img,
table,caption,th,td,
form,fieldset,legend,input,textarea,select,
pre,code,blockquote,address{
margin:0;
padding:0;
}
img{
max-width:100%;
height:auto;
border:0;
vertical-align:bottom;
}
ul{
list-style-position:outside;
list-style-type:none;
}
ol{
margin-left:2em;
list-style-position:outside;
}
dl dd{
margin-bottom:7px;
}
em{
font-style:normal;
color:#f00;
}
table{
border:medium none;
border-collapse:collapse;
}
th,td{
font-weight:normal;
vertical-align:top;
}
a:link,
a:visited{color:#000;text-decoration:none;}
a:hover,
a:active{color:#000;text-decoration:underline;}
a:hover img{opacity:.8;}

fieldset{border:0;}
legend{display:none;}
input{vertical-align:middle;}
input[type="text"],
input[type="password"],
input[type="submit"]{
-webkit-appearance:none;
border-radius:0;
}
select{border-radius:0;}
sup{vertical-align:text-top;line-height:0.6;}
sub{vertical-align:baseline;}
iframe{border:0;}

::before,
::after{display:inherit;}

.only-sp{display:none;}


/*------------------------------------------------------------------------------------------------------------------------
Element
------------------------------------------------------------------------------------------------------------------------*/
p,ul,ol,dl,table{margin-bottom:20px;}
p,li,dt,dd,caption,th,td{
font-size:1.6rem;
line-height:2;
}
input,textarea,select,button{
font-size:inherit;
font-family:inherit;
}
label,button{cursor:pointer;}


/*------------------------------------------------------------------------------------------------------------------------
Heading
------------------------------------------------------------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6{
margin-bottom:20px;
line-height:2;
font-weight:bold;
}


/* 枠組み */

/*========================================================================================================================
Base Layout
========================================================================================================================*/
#page{min-width:320px;}


/*------------------------------------------------------------------------------------------------------------------------
Header Area
------------------------------------------------------------------------------------------------------------------------*/
header{
margin:0 auto;
padding:10px;
max-width:980px;
}
header #site-id{
float:left;
margin:0;
line-height:1;
}
header #site-id span{
display:table-cell;
margin:0;
height:52px;
vertical-align:middle;
}
header .sub{
float:right;
margin:0;
}
header .utility{
float:left;
margin:0;
}
header .utility > li{
margin-bottom:5px;
font-size:1.2rem;
line-height:1;
}
header .utility > li img{vertical-align:middle;}
header .utility > li:last-of-type{margin-bottom:0;}
header .logo{
float:right;
margin:17px 0 0 40px;
line-height:1;
}


/*------------------------------------------------------------------------------------------------------------------------
Contents Area
------------------------------------------------------------------------------------------------------------------------*/
/* main-visual
----------------------------------------*/
.main-visual{position:relative;}
.main-visual::before{
content:'';
position:absolute;
top:0;
left:0;
z-index:0;
width:50%;
height:100%;
background:#9bdbf9;
}
.main-visual::after{
content:'';
position:absolute;
top:0;
left:50%;
z-index:0;
width:50%;
height:100%;
background:#c5e7f6;
}
.main-visual h1{
position:absolute;
top:10%;
left:0;
z-index:2;
margin:0;
width:100%;
color:#fb440f;
font-size:4.7rem;
text-align:center;
line-height:1;
}
.main-visual h1 .lay{
display:inline-block;
position:relative;
padding:0 35px;
}
.main-visual h1 .lay::before{
content:'';
position:absolute;
top:50%;
left:0;
margin-top:-19px;
width:25px;
height:38px;
background:url(/cms/rs/softcreate/images/windows10/bg/main-title.png) 0 0 no-repeat;
}
.main-visual h1 .lay::after{
content:'';
position:absolute;
top:50%;
right:0;
margin-top:-19px;
width:25px;
height:38px;
background:url(/cms/rs/softcreate/images/windows10/bg/main-title.png) -50px 0 no-repeat;
}
.main-visual p{
position:relative;
z-index:1;
margin:0;
text-align:center;
}

/* hdg-image
----------------------------------------*/
.hdg-image01{
margin-bottom:40px;
text-align:center;
}
.hdg-image02{
margin-bottom:50px;
text-align:center;
}
.hdg-image03{
margin-bottom:60px;
text-align:center;
}

/* transition-point
----------------------------------------*/
.transition-point{background:#daf2fd;}
.transition-point .point{
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
margin-bottom:40px;
}
.transition-point .point .cont{
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
padding:0 18px 3px;
width:33.33%;
border-right:2px solid;
border-bottom:2px solid;
border-left:2px solid;
background:#fff;
}
.transition-point .point p{
margin-bottom:15px;
font-size:1.4rem;
}

/* hdg */
.transition-point .point .hdg{
position:relative;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
margin:0 -18px 10px;
padding-top:10px;
height:85px;
background:#000;
color:#fff;
font-size:2.4rem;
text-align:center;
line-height:1.2;
}
.transition-point .point .hdg .num{
font-size:1.8rem;
font-weight:800;
}
.transition-point .point .hdg::before{
content:'';
position:absolute;
top:0;
right:-43px;
z-index:1;
width:0;
height:0;
border-style:solid;
border-width:42px 0 42px 42px;
border-color:transparent transparent transparent #000;
}

/* detail */
.transition-point .point .detail{
display:block;
position:relative;
padding:5px 35px;
background:#000;
color:#fff;
font-weight:bold;
text-align:center;
text-decoration:none;
}
.transition-point .point .detail::after{
content:'';
position:absolute;
top:50%;
right:20px;
margin-top:-5px;
width:12px;
height:11px;
background:url(/cms/rs/softcreate/images/windows10/bg/icon-arrow01-b.png) left top no-repeat;
background-size:12px auto;
}
.transition-point .point .detail:hover{
position:relative;
top:3px;
}

/* point1 */
.transition-point .point .cont:nth-child(1){border-color:#f35325;}
.transition-point .point .cont:nth-child(1) .hdg{background:#f35325;}
.transition-point .point .cont:nth-child(1) .hdg::before{border-color:transparent transparent transparent #f35325;}
.transition-point .point .cont:nth-child(1) .detail{background:#f35325;box-shadow:0 3px rgba(161,43,9,.8);}
.transition-point .point .cont:nth-child(1) .detail:hover{box-shadow:none;}

/* point2 */
.transition-point .point .cont:nth-child(2){border-color:#ffba08;}
.transition-point .point .cont:nth-child(2) .hdg{background:#ffba08;}
.transition-point .point .cont:nth-child(2) .hdg::before{border-color:transparent transparent transparent #ffba08;}
.transition-point .point .cont:nth-child(2) .detail{background:#ffba08;box-shadow:0 3px rgba(168,122,2,.8);}
.transition-point .point .cont:nth-child(2) .detail:hover{box-shadow:none;}

/* point3 */
.transition-point .point .cont:nth-child(3){border-color:#81bc06;}
.transition-point .point .cont:nth-child(3) .hdg{background:#81bc06;}
.transition-point .point .cont:nth-child(3) .hdg::before{display:none;}
.transition-point .point .cont:nth-child(3) .detail{background:#81bc06;box-shadow:0 3px rgba(76,111,2,.8);}
.transition-point .point .cont:nth-child(3) .detail:hover{box-shadow:none;}

/* blk-bg01
----------------------------------------*/
.blk-bg01{background:#f4f4f4;}

/* transition-point
----------------------------------------*/
.point01-task{
position:relative;
margin:0 auto 40px;
max-width:380px;
background:#f36339;
color:#fff;
font-size:2.4rem;
text-align:center;
}
.point01-task::after{
content:'';
position:absolute;
bottom:-9px;
left:50%;
margin-left:-10px;
width:0;
height:0;
border-style:solid;
border-width:9px 10.5px 0 10.5px;
border-color:#f36539 transparent transparent transparent;
}

/* blk-column01
----------------------------------------*/
.blk-column01{
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
margin:0 -5px 20px;
}
.blk-column01 .cont{
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
margin:0 5px 20px;
padding:20px;
width:calc(33.33% - 10px);
background:#fff;
}
.blk-column01.task .cont{
margin:0 5px 20px;
padding:0 20px 20px;
}
.blk-column01 .cont .hdg-task{
margin:0 0 10px;
font-size:1.8rem;
text-align:center;
}
.blk-column01 .cont .hdg-task .img{
display:table-cell;
margin:0;
width:280px;
height:170px;
text-align:center;
vertical-align:middle;
}
.blk-column01 .cont .hdg-task .hdg{display:block;}
.blk-column01 .cont .hdg-case{
margin:0 0 10px;
font-size:1.4rem;
}
.blk-column01 .cont .hdg-case .img{
display:block;
margin-bottom:20px;
border-bottom:1px solid #ccc;
text-align:center;
}
.blk-column01 .cont p{font-size:1.4rem;}

/* lead01
----------------------------------------*/
.lead01{
margin-bottom:50px;
font-size:1.8rem;
text-align:center;
}

/* task-proceed
----------------------------------------*/
.task-proceed{
position:relative;
margin-bottom:20px;
padding-top:60px;
font-size:3rem;
text-align:center;
line-height:1.5;
}
.task-proceed::before{
content:'';
position:absolute;
top:0;
left:50%;
margin-left:-17px;
width:35px;
height:27px;
background:url(/cms/rs/softcreate/images/windows10/bg/icon-arrow02-b.png) center top no-repeat;
background-size:35px auto;
}
.task-proceed strong{color:#f35325;}

/* blk-introduce
----------------------------------------*/
.blk-introduce{
margin:0;
padding:0 0 10px 56px;
min-height:380px;
background:url(/cms/rs/softcreate/images/windows10/bg/line-dot01.png) 26px top repeat-y;
background-size:2px auto;
}
.blk-introduce:last-of-type{
margin:0;
padding:0 0 40px 56px;
min-height:0;
background:none;
}
.blk-introduce .hdg{
display:table;
margin:0 0 25px -56px;
width:calc(100% + 56px);
}
.blk-introduce .hdg .num{
display:table-cell;
width:54px;
height:54px;
background:#ffba08;
border-right:2px solid #fff;
font-size:3rem;
text-align:center;
vertical-align:middle;
}
.blk-introduce .hdg .txt{
display:table-cell;
padding:7px 20px;
width:auto;
height:40px;
background:#ececec;
font-size:2.2rem;
vertical-align:middle;
line-height:1.5;
}

/* blk-column02
----------------------------------------*/
.blk-column02{
display:table;
width:100%;
}
.blk-column02 .txt{
display:table-cell;
width:554px;
vertical-align:top;
}
.blk-column02 .img{
margin-left:40px;
padding-top:8px;
width:330px;
text-align:center;
}

/* strong01
----------------------------------------*/
.strong01{background:#fff1ce;}

/* total-service
----------------------------------------*/
.total-service{
margin:0 0 40px;
padding:30px;
background:#e6f2cd;
}
.total-service .hdg-total{
margin:0 0 10px;
font-size:2.6rem;
text-align:center;
}
.total-service .txt01{
margin:0 0 40px;
font-size:1.6rem;
text-align:center;
}

/* service */
.total-service .service{
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
margin:0 -15px;
}
.total-service .service .cont{
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0 15px;
width:33.33%;
}
.total-service .service .cont .hdg{
margin:0 0 10px;
font-size:1.6rem;
text-align:center;
}
.total-service .service .cont .hdg img{margin-bottom:20px;}
.total-service .service .cont p{font-size:1.4rem;}
.total-service .service .caption01{font-size:1.1rem;}

/* conversion
----------------------------------------*/
.conversion{
box-sizing:border-box;
padding:50px 20px 74px;
background:#05a6f0 url(/cms/rs/softcreate/images/windows10/bg/conversion-cloud.png) center top no-repeat;
}
.conversion p{
margin-bottom:25px;
color:#fff;
font-size:2rem;
text-align:center;
}
.conversion .list-conversion{
margin:0 auto;
max-width:620px;
}
.conversion .list-conversion li{
box-sizing:border-box;
float:left;
margin:0;
padding:0 10px;
width:50%;
font-size:1.8rem;
}
.conversion .list-conversion li a{
display:block;
position:relative;
padding:17px 35px;
box-shadow:0 4px rgba(2,99,144,.8);
background:#000;
color:#fff;
font-weight:bold;
text-align:center;
text-decoration:none;
}
.conversion .list-conversion li a::after{
content:'';
position:absolute;
top:50%;
right:20px;
margin-top:-6px;
width:11px;
height:12px;
background:url(/cms/rs/softcreate/images/windows10/bg/icon-arrow01-r.png) left top no-repeat;
background-size:11px auto;
}
.conversion .list-conversion li a:hover{
position:relative;
top:3px;
box-shadow:none;
}

/* section
----------------------------------------*/
.sec-cont01{
margin:0 auto;
padding:70px 10px 30px;
max-width:980px;
}
.sec-cont02{
margin:0 auto;
padding:0 10px;
max-width:980px;
}



/*------------------------------------------------------------------------------------------------------------------------
Footer Area
------------------------------------------------------------------------------------------------------------------------*/
footer{
margin:0 auto;
padding:0 10px;
max-width:980px;
}
footer a{color:#242424;}

/* contents01 */
footer .contents01{
position:relative;
padding:30px 80px 15px 0;
}
footer .contents01 .logo{float:left;}
footer .contents01 .logo p{
padding-left:65px;
font-size:1.2rem;
line-height:1;
}
footer .contents01 .utility{
float:right;
margin:0;
}
footer .contents01 .utility > li{
margin-bottom:5px;
font-size:1.2rem;
line-height:1;
}
footer .contents01 .utility > li img{vertical-align:middle;}
footer .contents01 .utility > li:last-of-type{margin-bottom:0;}
footer .contents01 .btnPagetop{
position:absolute;
top:30px;
right:0;
}
footer .contents01 .btnPagetop.fixed{
position:fixed;
top:auto;
bottom:10px;
right:20px;
}

/* contents02 */
footer .contents02{
padding:20px 0 40px;
border-top:1px solid #c9cdce;
}
footer .contents02 .logo{
float:right;
margin:0;
}
footer .contents02 ul{
float:left;
margin:0;
}
footer .contents02 ul li{
float:left;
margin-right:45px;
font-size:1.3rem;
}
footer .contents02 .copyright{
float:left;
margin:0;
font-size:1.1rem;
}


/*------------------------------------------------------------------------------------------------------------------------
clearFix
------------------------------------------------------------------------------------------------------------------------*/
header::after,
.conversion .list-conversion::after,
footer .contents01::after,
footer .contents02::after{
display:block;
content:'';
clear:both;
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
screen
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* 767px以下
------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:767px){

.br-sp:before{
content:"\A";
white-space:pre;
}

.only-pc{display:none;}
.only-sp{display:block;}
img.only-sp{display:inline;}

/*------------------------------------------------------------------------------------------------------------------------
Element
------------------------------------------------------------------------------------------------------------------------*/
p,li,dt,dd,caption,th,td{font-size:1.4rem;}


/*------------------------------------------------------------------------------------------------------------------------
Heading
------------------------------------------------------------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6{
margin-bottom:20px;
line-height:2;
font-weight:bold;
}


/*------------------------------------------------------------------------------------------------------------------------
Header Area
------------------------------------------------------------------------------------------------------------------------*/
header{padding:15px 20px;}
header #site-id{
margin:0;
width:154px;
}
header #site-id span{height:auto;}
header #site-id img{width:154px;}
header .utility > li{
margin-top:2px;
font-size:1rem;
}
header .logo{display:none;}


/*------------------------------------------------------------------------------------------------------------------------
Contents Area
------------------------------------------------------------------------------------------------------------------------*/
/* main-visual
----------------------------------------*/
.main-visual h1{
top:6%;
font-size:2.7rem;
line-height:1.2;
}
.main-visual h1 .txt01{display:block;}
.main-visual h1 .lay{padding:0 30px;}
.main-visual h1 .lay::before{
margin-top:-31px;
width:25px;
height:62px;
background-position:0 -25px;
background-size:100px auto;
}
.main-visual h1 .lay::after{
margin-top:-31px;
width:25px;
height:62px;
background-position:-50px -25px;
background-size:100px auto;
}

/* hdg-image
----------------------------------------*/
.hdg-image01,
.hdg-image02,
.hdg-image03{
margin-bottom:35px;
}
#point01.hdg-image02{
margin-right:-10px;
margin-left:-10px;
}

/* transition-point
----------------------------------------*/
.transition-point .point{
display:block;
margin-bottom:20px;
}
.transition-point .point .cont{
position:relative;
padding:0 18px 3px;
width:auto;
}
.transition-point .point .cont::before{
content:'';
position:absolute;
top:auto;
right:-2px;
bottom:0;
left:-2px;
z-index:1;
width:calc(100% + 4px);
height:17px;
border:0;
background:left top no-repeat;
background-size:100% 17px;
}
.transition-point .point p{
margin-bottom:15px;
font-size:1.4rem;
}

/* hdg */
.transition-point .point .hdg::before{display:none;}

/* detail */
.transition-point .point .detail{padding:10px 35px;}

/* point1 */
.transition-point .point .cont:nth-child(1){padding-bottom:30px;border-bottom:0;}
.transition-point .point .cont:nth-child(1)::before{background-image:url(/cms/rs/softcreate/images/windows10/bg/point01-arrow-sp.png);}

/* point2 */
.transition-point .point .cont:nth-child(2){padding-bottom:30px;border-bottom:0;}
.transition-point .point .cont:nth-child(2)::before{background-image:url(/cms/rs/softcreate/images/windows10/bg/point02-arrow-sp.png);}

/* transition-point
----------------------------------------*/
.point01-task{
margin:0 auto 25px;
max-width:260px;
font-size:1.8rem;
}

/* blk-column01
----------------------------------------*/
.blk-column01{
display:block;
margin:0 0 20px;
}
.blk-column01.task{
display:flex;
margin:0 -5px 15px;
}
.blk-column01 .cont{
margin:0 0 10px;
padding:10px 20px;
width:auto;
}
.blk-column01.task .cont{
margin:0 5px 10px;
padding:10px 15px;
width:calc(50% - 10px);
}
.blk-column01 .cont .hdg-task{
margin:0 0 10px;
font-size:1.5rem;
line-height:1.2;
}
.blk-column01 .cont .hdg-task .img{
width:330px;
height:120px;
}
.blk-column01 .cont .hdg-task .img img{
width:auto;
height:84px;
}
.blk-column01 .cont .hdg-task .hdg{min-height:2.4em;}
.blk-column01 .cont .hdg-case{
margin:0 0 10px;
font-size:1.4rem;
}
.blk-column01 .cont .hdg-case .img{
display:block;
margin-bottom:20px;
border-bottom:1px solid #ccc;
text-align:center;
}
.blk-column01 .cont p{font-size:1.5rem;}
.blk-column01.task .cont p{font-size:1.3rem;}

/* lead01
----------------------------------------*/
.lead01{
margin-bottom:30px;
font-size:1.4rem;
}


/* task-proceed
----------------------------------------*/
.task-proceed{
margin-bottom:10px;
padding-top:45px;
font-size:1.8rem;
line-height:1.5;
}
.task-proceed strong{font-size:2.5rem;}

/* blk-introduce
----------------------------------------*/
.blk-introduce{
padding:0 0 30px 56px;
min-height:0;
}
.blk-introduce:last-of-type{padding:0 0 30px 56px;}
.blk-introduce .hdg{
display:table;
margin:0 0 15px -56px;
min-height:0;
}
.blk-introduce .hdg .txt{
padding:7px 5px 7px 15px;
width:auto;
height:40px;
font-size:1.6rem;
}

/* blk-column02
----------------------------------------*/
.blk-column02{
display:block;
width:auto;
}
.blk-column02 .txt{
display:block;
width:auto;
vertical-align:top;
}
.blk-column02 .txt p{line-height:1.785;}
.blk-column02 .img{
display:block;
width:auto;
margin-left:0;
padding-top:0;
text-align:center;
}

/* total-service
----------------------------------------*/
.total-service{
margin:0 -20px -30px;
padding:40px 20px 20px;
}
.total-service .hdg-total{
margin:0 0 20px;
font-size:2.2rem;
}
.total-service .txt01{
margin:0 0 30px;
font-size:1.4rem;
}

/* service */
.total-service .service{
display:block;
margin:0 15px;
}
.total-service .service .cont{
margin:0 0 30px;
padding:0;
width:auto;
}
.total-service .service .cont .hdg{
margin:0 0 10px;
font-size:1.6rem;
text-align:center;
}
.total-service .service .cont .hdg img{margin-bottom:20px;}
.total-service .service .cont p{font-size:1.4rem;}
.total-service .service .caption01{font-size:1.1rem;}

/* conversion
----------------------------------------*/
.conversion{
padding:25px 20px 20px;
background-image:url(/cms/rs/softcreate/images/windows10/bg/conversion-cloud-sp.png);
background-size:435px auto;
}
.conversion p{
margin-bottom:20px;
font-size:1.8rem;
line-height:1.5;
}
.conversion .list-conversion li{
float:none;
margin:0 0 20px;
padding:0;
width:auto;
font-size:1.5rem;
}
.conversion .list-conversion li a{padding:15px 35px;}

/* section
----------------------------------------*/
.sec-cont01{padding:50px 20px 30px;}
.sec-cont02{padding:0 20px;}


/*------------------------------------------------------------------------------------------------------------------------
Footer Area
------------------------------------------------------------------------------------------------------------------------*/
footer{padding:0 20px;}

/* contents01 */
footer .contents01{padding:30px 0 50px;}
footer .contents01 .logo img{width:154px;}
footer .contents01 .logo p{display:none;}
footer .contents01 .utility > li{
margin-top:2px;
font-size:1rem;
}
footer .contents01 .btnPagetop{
position:absolute;
top:auto;
right:auto;
bottom:15px;
left:50%;
margin:0 0 0 -29px;
}
footer .contents01 .btnPagetop.fixed{
left:auto;
margin:0;
}

/* contents02 */
footer .contents02{
margin:0 -20px;
padding:15px 20px;
}
footer .contents02 .logo{
float:none;
margin:0 0 15px;
text-align:center;
}
footer .contents02 .logo img{width:150px;}
footer .contents02 ul{
float:none;
margin:0 0 15px;
text-align:center;
letter-spacing:-.4em;
}
footer .contents02 ul li{
display:inline-block;
float:none;
margin:0 10px;
font-size:1rem;
letter-spacing:normal;
}
footer .contents02 .copyright{
float:none;
margin:0;
font-size:1rem;
text-align:center;
}

}