@charset "utf-8";


@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);


body{
min-width:1100px;
margin:0;
padding:0;
font-size:16px;
font-weight:600;
font-family:"Noto Sans Japanese" , "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}



/* ===========================================================

   header

=========================================================== */

header{
width:100%;
padding:6px 0 14px 0;
position:fixed;
top:0;
left:0;
z-index:100;
transition:all 0.2s;
}
header div{
width:1100px;
margin:0 auto;
padding:0;
overflow:hidden;
}
header div h1{
margin:0;
padding:0;
color:#fff;
font-size:2.25rem;
font-weight:300;
float:left;
transition:all 0.2s;
}
header div a{
display:block;
width:200px;
margin:14px 20px 0 0;
padding:4px 15px 6px 15px;
color:#333;
font-size:0.875rem;
text-align:center;
text-decoration:none;
border-radius:20px;
background:#fff;
float:right;
position:relative;
overflow:hidden;
z-index:3;
transition:all 0.2s;
}
/* hover */
header div a:hover{
color:#fff;
}
header div a:before{
content:"お問い合わせ";
display:block;
width:240px;
height:22px;
padding:5px 20px 6px 0;
color:#fff;
position:absolute;
top:-32px;
left:-5px;
transition:all 0.2s;
z-index:2;
}
header div a:hover:before{
background:#005cca;
top:0;
left:-5px;
opacity:1;
}
/* arrow */
header div a:hover:after{
border-top:7px #fff solid;
}
header div a:after{
content:"";
width:0;
height:0;
border-top:7px #2d7bc3 solid;
border-right:5px solid transparent;
border-left:5px solid transparent;
position:absolute;
top:13px;
right:13px;
z-index:5;
transition:all 0.2s;
transform:rotate(-90deg)
}
header.header_bg{
padding:5px 0 11px 0;
background:#333;
transition:all 0.2s;
}
header.header_bg h1{
font-size:1.5rem;
transition:all 0.2s;
}
header.header_bg div a{
margin:5px 20px 0 0;
}



/* ===========================================================

   contents

=========================================================== */

article{
width:100%;
min-width:1100px;
margin:0;
padding:70px 0 0 0;
}
article > section{
width:100%;
margin:-32px 0 45px 0;
padding:0;
transform:skewY(-5deg);
}
article > section > div{
width:1100px;
margin:0 auto;
padding:60px 0 65px 0;
color:#fff;
transform:skewY(5deg);
}
h2{
font-size:3rem;
letter-spacing:-0.1rem;
}


/* Key Visual
------------------------------------------------------------*/
section#kv{
width:100%;
height:500px;
margin-top:-90px;
padding:120px 0 270px 0;
color:#fff;
font-size:1.5rem;
background:url(../img/as/bg_kv.jpg) no-repeat 50% 0;
background-size:cover;
overflow: hidden;
transform:skewY(0);
}
section#kv div{
transform:skewY(0);
position: relative;
}
section#kv div p{
margin:0 0 1rem 0;
padding:0 0 0 3rem;
font-size:3rem;
line-height:1;
transform:skewX(-10deg);
}
section#kv div p span{
position: absolute;
opacity: 0;
}
section#kv div p span:nth-of-type(1),
section#kv div p span:nth-of-type(3),
section#kv div p span:nth-of-type(5),
section#kv div p span:nth-of-type(7){
font-size:8rem;
}
section#kv div p span:nth-of-type(1){
top:-1800px;
}
section#kv div p span:nth-of-type(2){
top:55px;
left:380px;
}
section#kv div p span:nth-of-type(3){
top:130px;
left:-2300px;
white-space: nowrap;
}
section#kv div p span:nth-of-type(4){
top:190px;
left:260px;
}
section#kv div p span:nth-of-type(5){
top:130px;
left:2590px;
}
section#kv div p span:nth-of-type(6){
top:320px;
left:5px;
}
section#kv div p span:nth-of-type(7){
top:2300px;
left:145px;
}
section#kv div img{
position: absolute;
}
section#kv div img:nth-of-type(1){
top:30px;
left:2000px;
z-index: 3;
}
section#kv div img:nth-of-type(2){
width:180px;
top:200px;
left:2000px;
z-index: 2;
}
section#kv div img:nth-of-type(3){
width:250px;
top:260px;
left:2000px;
z-index: 1;
}

section#kv > a{
display: block;
width:100%;
margin:0 auto;
padding:30px 0 0 0;
color:#333;
font-size:1.75rem;
text-align: center;
line-height:1.5;
text-decoration: none;
background:rgba(255,255,255,0.5);
position: absolute;
bottom:150px;
z-index:10;
}
section#kv > a:hover{
background:rgba(255,255,255,0.7);
}
section#kv > a span{
display: block;
width:1100px;
margin:0 auto;
transform:skewX(-10deg);
}

section#kv + section{
margin-top:-130px;
}





/* ===========================================================

   main

=========================================================== */

section#firstarea h2,
section#secondarea h2,
section#thirdarea h2{
padding-left:1rem;
font-size:3.5rem;
line-height:1.35;
transform: skewX(-10deg);
}

p.caution{
margin:1rem auto !important;
font-weight:300;
opacity: 0.9;
}


/* 1st
------------------------------------------------------------*/
section#firstarea{
background:#00adf7;
}
section#firstarea > div{
width:100%;
padding-top:90px;
}
section#firstarea > div > h2,
section#firstarea > div > p{
width:1100px;
margin:0 auto;
}
section#firstarea > div > div{
margin:0 0 80px 0;
padding:0 0 30px 0;
background: url(../img/as/bg_1starea.jpg) no-repeat 50% 50%;
background-size:cover;
transform: skewY(-5deg);
}
section#firstarea > div > div > h3{
padding:5rem 0 0 0;
font-size: 3rem;
text-align: center;
text-shadow: 0 5px 5px rgba(0,0,0,0.5);
transform: skewY(5deg);
}
section#firstarea > div > div section{
width:1100px;
margin:0 auto;
transform: skewY(5deg);
}
section#firstarea > div > div > div{
width:1100px;
margin:0 auto;
transform: skewY(5deg);
}
section#firstarea > div > div section h4{
width:100px;
padding:35px 0;
color:#003375;
font-size:30px;
text-align: center;
line-height:1;
letter-spacing:-1px;
border:15px #00adf7 solid;
border-radius: 100px;
background: #fff;
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
section#firstarea > div > div section:nth-of-type(2) h4{
border-color:#4375e7;
}
section#firstarea > div > div ul{
margin:0 0 0 70px;
padding:0;
list-style: none;
position: relative;
}
section#firstarea > div > div ul li{
width:190px;
height:38px;
padding:93px 0 0 0;
text-align: center;
background-image: url(../img/as/bg_1stcloud.png);
background-repeat: no-repeat;
position: absolute;
}
section#firstarea > div > div section:nth-of-type(1) ul li:nth-of-type(1){
background-position: 0 0;
top:-160px;
left:130px;
}
section#firstarea > div > div section:nth-of-type(1) ul li:nth-of-type(2){
background-position: -190px 0;
top:-160px;
left:430px;
}
section#firstarea > div > div section:nth-of-type(1) ul li:nth-of-type(3){
background-position: 0 -131px;
top:-10px;
left:0;
}
section#firstarea > div > div section:nth-of-type(1) ul li:nth-of-type(4){
background-position: -190px -131px;
top:-10px;
left:280px;
}
section#firstarea > div > div section:nth-of-type(1) ul li:nth-of-type(5){
background-position: -380px -131px;
top:-10px;
left:580px;
}
section#firstarea > div > div section:nth-of-type(1) ul li:nth-of-type(6){
background-position: 0 -262px;
top:130px;
left:130px;
}
section#firstarea > div > div section:nth-of-type(1) ul li:nth-of-type(7){
background-position: -190px -262px;
top:130px;
left:430px;
}


section#firstarea > div > div div  ul li:nth-of-type(1){
background-position: -380px 0;
top:-100px;
right:5px;
}
section#firstarea > div > div div  ul li:nth-of-type(2){
background-position: -380px -262px;
top:80px;
right:5px;
}

section#firstarea > div > div section:nth-of-type(2) h4{
margin-top:360px;
}
section#firstarea > div > div section:nth-of-type(2) ul li:nth-of-type(1){
background-position: 0 -393px;
top:-175px;
left:100px;
}
section#firstarea > div > div section:nth-of-type(2) ul li:nth-of-type(2){
background-position: -190px -393px;
top:-175px;
left:328px;
}
section#firstarea > div > div section:nth-of-type(2) ul li:nth-of-type(3){
background-position: -380px -393px;
top:-175px;
left:560px;
}



/* 2nd
------------------------------------------------------------*/
section#secondarea{
background:#3bc186;
}
section#secondarea > div > div{
display: flex;
justify-content:space-between;
}
section#secondarea > div > div > div{
margin:1rem 0;
padding:0 20px 20px 20px;
border-radius: 10px;
background:#fff;
transform: rotateY(90deg);
transition:.5s;
}
section#secondarea > div > div > div.open{
transform: rotateY(0);
}
section#secondarea > div > div > div h3{
margin:1rem 0 2rem 0;
padding:0 0 10px 0;
color:#00479d;
font-size:1.875rem;
border-bottom:1px #00479d solid;
position: relative;
}
section#secondarea > div > div > div h3 span{
font-size:1rem;
font-weight:normal;
text-align: right;
line-height:1;
position: absolute;
right:0;
bottom:15px;
}



/* 3rd
------------------------------------------------------------*/
section#thirdarea{
background:#76d214;
}
section#thirdarea > div{
padding:45px 0 1050px 0;
position: relative;
}
section#thirdarea > div ul{
margin:0;
padding:0;
list-style: none;
}
section#thirdarea > div ul li{
width:300px;
height:150px;
font-size:1.5rem;
text-align: center;
line-height:1.25;
position: absolute;
}
section#thirdarea > div ul li img{
display: block;
margin:0 auto 10px auto;
}
section#thirdarea > div ul li:nth-of-type(1){
top:390px;
left:140px;
}
section#thirdarea > div ul li:nth-of-type(2){
top:390px;
right:140px;
}
section#thirdarea > div ul li:nth-of-type(3){
top:705px;
left:70px;
}
section#thirdarea > div ul li:nth-of-type(4){
top:705px;
right:70px;
}
section#thirdarea > div ul li:nth-of-type(5){
top:940px;
left:400px;
}
section#thirdarea > div section{
margin:0;
padding:0;
width:0;
height:0;
text-align: center;
border-radius: 300px;
background: #fff;
position: absolute;
top:715px;
left:550px;
overflow: hidden;
transition: 0.2s;
}
section#thirdarea > div section.large{
width:400px;
height:400px;
top:515px;
left:350px;
transition: 0.3s;
}
section#thirdarea > div section h3{
margin:0 0 5px 0;
padding:60px 0 0 20px;
color:#76d214;
font-size:5rem;
transform:skewX(-10deg);
}
section#thirdarea > div section p{
margin:0;
padding:0;
color:#00479d;
font-size:1.75rem;
}


/* Inquiry
------------------------------------------------------------*/
section#inquiry,
section#inquiry > div{
background:none;
position:relative;
z-index:99;
transform:none;
}
section#inquiry{
margin-top:-270px;
padding:0;
}
section#inquiry > div{
padding:100px 0;
color:#000;
}
section#inquiry h2,
section#inquiry h3{
margin:0;
padding:0;
text-align:center;
background:#ffe400;
}
section#inquiry h2{
font-size:6.25rem;
letter-spacing:-0.3rem;
}
section#inquiry h3{
padding:0 0 20px 0;
font-size:2.25rem;
letter-spacing:-0.1rem;
box-shadow:0 10px 10px rgba(0,0,0,0.4);
}
section#inquiry > div{
overflow:hidden;
}
section#inquiry > div > div{
width:500px;
padding:85px 0 0 0;
text-align:center;
}
section#inquiry > div > div:nth-of-type(1){
float:left;
}
section#inquiry > div > div:nth-of-type(2){
float:right;
}
section#inquiry > div > div p{
margin:0 0 5px 0;
padding:0;
}
section#inquiry > div > div:nth-of-type(1) p{
text-indent:-0.5rem;
}
section#inquiry > div > div a{
display:block;
width:100%;
margin:0;
padding:20px 0 20px 0;
color:#333;
font-size:2.25rem;
line-height:0.8;
text-decoration:none;
border-radius:100px;
background:#ffe400;
float:left;
position:relative;
overflow:hidden;
box-shadow:0 5px 5px rgba(0,0,0,0.2);
transition:all 0.5s;
}
section#inquiry > div > div a span{
font-size:1.125rem;
}
section#inquiry > div > div a:after{
content:"";
width:0;
height:0;
border-top:10px #e00 solid;
border-right:8px solid transparent;
border-left:8px solid transparent;
position:absolute;
top:45%;
right:7.5%;
transform:rotate(-90deg);
transition:all 0.5s;
}
section#inquiry > div > div:nth-of-type(2) a{
padding:30px 0 38.8px 0;
}

/* hover inquiry 01 */
section#inquiry > div > div a:hover{
color:#fff;
}
section#inquiry > div > div a:before{
content:"Microsoft Azure";
display:block;
width:460px;
height:50px;
padding:30px 20px 20px 20px;
color:#fff;
position:absolute;
top:-100px;
left:0;
transition:all 0.2s;
z-index:2;
}
section#inquiry > div > div a:hover:before{
background:#005cca;
top:0;
left:0;
opacity:1;
}
section#inquiry > div > div a:hover:after{
border-top:7px #fff solid;
z-index:3;
}

/* hover inquiry 02 */
section#inquiry > div > div:nth-of-type(2) a:before{
content:"お問い合わせ";
}


/* PageTop
------------------------------------------------------------*/
#pagetop{
display:none;
margin:0 0 20px 0;
padding:10px 25px 13px 25px;
color:#fff;
text-indent:-9999px;
background:#333;
right:-100px;
z-index:200;
opacity:0.5;
transform:skewY(-5deg);
}
#pagetop:after{
content:"";
width:0;
height:0;
border-top:10px #fff solid;
border-right:8px solid transparent;
border-left:8px solid transparent;
position:absolute;
top:39%;
right:33%;
transform:rotate(175deg);
}
#pagetop:hover{
cursor:pointer;
opacity:1;
transition:background 0.5s;
}



/* ===========================================================

   footer

=========================================================== */

footer{
width:100%;
margin:0;
padding:10px 0;
background:#333;
}
footer div{
width:1100px;
margin:0 auto;
color:#fff;
font-size:0.675rem;
overflow:hidden;
}
footer div a:first-child{
display:block;
width:100px;
margin:15px 40px 0 0;
float:left;
}
footer div p{
font-weight:normal;
float:left;
}
footer div a:last-child{
display:block;
width:200px;
margin:12px 0 0 0;
padding:5px 15px;
color:#333;
font-size:0.875rem;
text-decoration:none;
border-radius:20px;
background:#fff;
float:right;
overflow:hidden;
position:relative;
transition:all 0.5s;
}

/* hover */
footer div a:last-child:hover{
color:#fff;
}
footer div a:last-child:before{
content:"個人情報の取り扱いについて";
display:block;
width:240px;
height:22px;
padding:5px 20px 6px 15px;
color:#fff;
position:absolute;
top:-32px;
left:0;
transition:all 0.2s;
z-index:2;
}
footer div a:last-child:hover:before{
background:#005cca;
top:0;
left:0;
opacity:1;
}
/* arrow */
footer div a:last-child:hover:after{
border-top:7px #fff solid;
}
footer div a:last-child:after{
content:"";
width:0;
height:0;
border-top:7px #2d7bc3 solid;
border-right:5px solid transparent;
border-left:5px solid transparent;
position:absolute;
top:13px;
right:13px;
z-index:5;
transition:all 0.2s;
transform:rotate(-90deg)
}