@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" , meiryo , 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;
}
      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;
}
      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;
}

/* hover */
/* arrow */
/* ===========================================================

   contents

=========================================================== */
article {
  width: 100%;
  min-width: 1100px;
  margin: 0;
  padding: 70px 0 0 0;
}

section {
  width: 100%;
  margin: -32px 0 45px 0;
  padding: 0;
  transform: skewY(-5deg);
}
  section > div {
    width: 1100px;
    margin: 0 auto;
    padding: 60px 0 65px 0;
    color: #fff;
    overflow: hidden;
    transform: skewY(5deg);
}

h2 {
  font-size: 3rem;
  letter-spacing: -0.1rem;
}

/* Key Visual
------------------------------------------------------------*/
section#kv {
  width: 100%;
  margin-top: -90px;
  padding: 120px 0 100px 0;
  color: #fff;
  font-size: 1.5rem;
  background: url(../img/bg_kv.jpg) no-repeat 50% 70%;
  background-size: cover;
  transform: skewY(0);
}
  section#kv div {
    transform: skewY(0);
}
    section#kv div p {
      margin: 0 0 1rem 0;
      padding: 0;
      line-height: 1;
      opacity: 0;
}
      section#kv div p:nth-of-type(2) {
        margin: 0 0 1.5rem -4.5rem;
        font-size: 10rem;
        font-weight: 700;
        position: relative;
        top: 50px;
}
      section#kv div p:nth-of-type(3) {
        margin: 0 0 6rem 0;
}
    section#kv div a {
      display: block;
      width: 370px;
      margin: 0 0 0 110px;
      padding: 13px 15px 17px 15px;
      color: #fff;
      font-size: 1.875rem;
      text-align: center;
      text-decoration: none;
      border-radius: 100px;
      background: #00adf7;
      float: left;
      position: relative;
      top: 20px;
      opacity: 0;
      overflow: hidden;
      z-index: 3;
      transition: all 0.2s;
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
      transition: all 0.5s;
}
      section#kv div a:after {
        content: "";
        width: 0;
        height: 0;
        border-top: 7px #fff solid;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        position: absolute;
        bottom: 5px;
        right: 50%;
        z-index: 3;
        transition: all 0.5s;
}
      section#kv div a + a {
        margin: 0 110px 0 0;
        background: #76d214;
        float: right;
}
      section#kv div a:hover {
        color: #fff;
}
      section#kv div a:nth-of-type(1):before {
        content: "Azureを「選ぶ」ワケ";
        display: block;
        width: 370px;
        padding: 13px 15px 17px 15px;
        color: #00adf7;
        position: absolute;
        top: -75px;
        left: 0;
        transition: all 0.2s;
        z-index: 2;
}
      section#kv div a:nth-of-type(1):hover:before {
        background: #fff;
        top: 0;
        left: 0;
        opacity: 1;
}
      section#kv div a:nth-of-type(1):hover:after {
        border-top: 7px #00adf7 solid;
}
      section#kv div a:nth-of-type(2):before {
        content: "CTCで「選ぶ」ワケ";
        display: block;
        width: 370px;
        padding: 13px 15px 17px 15px;
        color: #76d214;
        position: absolute;
        top: -75px;
        left: 0;
        transition: all 0.2s;
        z-index: 2;
}
      section#kv div a:nth-of-type(2):hover:before {
        background: #fff;
        top: 0;
        left: 0;
        opacity: 1;
}
      section#kv div a:nth-of-type(2):hover:after {
        border-top: 7px #76d214 solid;
}
  section#kv + section {
    margin-top: -130px;
}
section#azure {
  background: #00adf7;
}
  section#azure + section {
    background: #00adf7;
}
  section#azure div {
    background: url(../img/bg_section01.png) no-repeat 100% 5%;
    overflow: hidden;
}
    section#azure div h3 {
      width: 255px;
      height: 232px;
      margin: 59px 0 0 0;
      padding: 190px 45px 0 0;
      color: #00adf7;
      font-family: meiryo;
      font-size: 1.625rem;
      text-align: center;
      vertical-align: middle;
      border-right: 2px #fff solid;
      background: url(../img/bg_cloud.png) no-repeat 0 42%;
      float: left;
      position: relative;
}
      section#azure div h3:after {
        content: "";
        width: 45px;
        height: 2px;
        background: #fff;
        position: absolute;
        top: 210px;
        right: 0;
}
    section#azure div dl {
      width: 755px;
      color: #00adf7;
      float: right;
}
      section#azure div dl dt {
        width: 120px;
        height: 58px;
        margin: 0 0 15px 0;
        padding: 32px 0 0 20px;
        font-size: 0.875rem;
        text-align: center;
        border-radius: 100px 0 0 100px;
        background: #fff;
        float: left;
        position: relative;
        font-family: Segoe Print;
}
        section#azure div dl dt:before {
          content: "";
          width: 45px;
          height: 2px;
          background: #fff;
          position: absolute;
          top: 43px;
          left: -43px;
}
      section#azure div dl dd {
        width: 590px;
        height: 90px;
        margin: 0 0 15px 0;
        padding: 0 15px 0 10px;
        border-radius: 0 100px 100px 0;
        background: #fff;
        float: right;
}
        section#azure div dl dd ul {
          margin: 16px 0 0 0;
          padding: 0;
          color: #333;
          list-style: none;
          overflow: hidden;
}
          section#azure div dl dd ul li {
            width: 140px;
            height: auto;
            font-size: 1.5rem;
            margin: 10px 10px 0 0;
            text-align: center;
            float: left;
}
            section#azure div dl dd ul li:last-child {
              margin-right: 0;
}
  section#azure + section > div {
    background: url(../img/bg_section02.png) no-repeat 100% 5%;
    overflow: hidden;
}
    section#azure + section > div > div {
      padding: 50px 0 0 0;
}
      section#azure + section > div > div p {
        width: 320px;
        font-size: 1.5rem;
        text-align: center;
        line-height: 1;
}
        section#azure + section > div > div p:nth-of-type(odd) {
          padding-left: 200px;
          float: left;
}
        section#azure + section > div > div p:nth-of-type(even) {
          padding-right: 200px;
          float: right;
}
        section#azure + section > div > div p:nth-of-type(1) {
          margin: 0 0 70px 0;
          background: url(../img/bg_section0201.png) no-repeat 0 50%;
}
        section#azure + section > div > div p:nth-of-type(2) {
          margin: 0 0 70px 0;
          background: url(../img/bg_section0202.png) no-repeat 90% 50%;
}
        section#azure + section > div > div p:nth-of-type(3) {
          margin: 0;
          background: url(../img/bg_section0203.png) no-repeat 10% 50%;
}
        section#azure + section > div > div p:nth-of-type(4) {
          margin: 0;
          background: url(../img/bg_section0204.png) no-repeat 85% 50%;
}
    section#azure + section > div p span {
      display: block;
      font-size: 10rem;
      text-align: center;
      letter-spacing: -0.5rem;
      opacity: 0;
}
    section#azure + section > div p span.MoreThanHalf {
      font-size: 5rem;
      letter-spacing: 0.06em;
      font-weight: bolder;
}
    section#azure + section > div > div p:nth-of-type(1) span {
      text-indent: -0.1em;
}
    section#azure + section > div > div p sub {
      font-size: 3rem;
      vertical-align: baseline;
}
section#ctc {
  background: #76d214;
}
  section#ctc + section {
    background: #76d214;
}
  section#ctc > div {
    background: url(../img/bg_section03.png) no-repeat 100% 5%;
    overflow: hidden;
}
    section#ctc > div div.left {
      width: 520px;
      float: left;
}
      section#ctc > div div.left p {
        font-size: 1.875rem;
        letter-spacing: -0.1rem;
}
        section#ctc > div div.left p a {
          display: inline-block;
          color: #fff;
          font-size: 3rem;
}
          section#ctc > div div.left p a:hover {
            color: #76d214;
            background-color: #fff;
}
        section#ctc > div div.left p + p {
          font-size: 1.5rem;
}
        section#ctc > div div.left p span {
          display: inline-block;
          color: #fff;
          font-size: 3rem;
}
    section#ctc > div div.right {
      width: 580px;
      margin-top: 50px;
      float: right;
      position: relative;
}
      section#ctc > div div.right h3:nth-of-type(1) {
        width: 120px;
        padding: 0 0 160px 0;
        text-align: center;
        text-indent: -3rem;
        background: url(../img/img_section03_building.png) no-repeat 50% 100%;
        position: absolute;
        top: 10px;
        left: 0;
        z-index: 29;
}
        section#ctc > div div.right h3:nth-of-type(1) + ul {
          margin: 0;
          padding: 0;
          font-size: 1.375rem;
          text-align: center;
          list-style: none;
          position: absolute;
          top: 90px;
          left: 134px;
          z-index: 20;
}
          section#ctc > div div.right h3:nth-of-type(1) + ul + div {
            width: 311px;
            height: 311px;
            margin: 0;
            padding: 0;
            position: absolute;
            top: -15px;
            left: 70px;
            z-index: 20;
}
      section#ctc > div div.right h3:nth-of-type(2) {
        width: 255px;
        height: 180px;
        padding-top: 20px;
        text-align: center;
        background: url(../img/bg_cloud.png) no-repeat 50% 100%;
        position: absolute;
        top: 0;
        right: 0;
}
        section#ctc > div div.right h3:nth-of-type(2) + ul {
          margin: 0;
          padding: 0;
          list-style: none;
          position: absolute;
          top: 125px;
          right: 93px;
          display: flex;
          flex-direction: column;
          align-items: center;
}
          section#ctc > div div.right h3:nth-of-type(2) + ul li {
            margin: 0;
            padding: 0;
            color: #76d214;
            font-size: 1.1em;
}
            section#ctc > div div.right h3:nth-of-type(2) + ul li img {
              width: 100px;
}
          section#ctc > div div.right h3:nth-of-type(2) + ul + p {
            color: #76d214;
            font-size: 0.75rem;
            position: absolute;
            top: 178px;
            right: 25px;
            z-index: 29;
}
  section#ctc + section {
    background: #76d214;
}
    section#ctc + section > div {
      padding-bottom: 280px;
      background: url(../img/bg_section04.png) no-repeat 100% 5%;
      overflow: hidden;
}
      section#ctc + section > div div:nth-of-type(n+1) {
        width: 350px;
        margin: 20px 25px 25px 0;
        font-size: 3.75rem;
        text-align: right;
        line-height: 1;
        letter-spacing: -0.5rem;
        float: left;
}
        section#ctc + section > div div:nth-of-type(n+1) p {
          margin: 0;
          padding: 0;
          transform: skewY(-5deg);
}
          section#ctc + section > div div:nth-of-type(n+1) p sub {
            font-size: 1.875rem;
            vertical-align: baseline;
            letter-spacing: 0;
}
          section#ctc + section > div div:nth-of-type(n+1) p span {
            display: block;
            margin-top: 50px;
            font-size: 1.5rem;
            text-align: center;
            letter-spacing: 0;
            transform: skewY(5deg);
}
      section#ctc + section > div div:nth-of-type(1) {
        background: url(../img/bg_section0401.png) no-repeat 0 100%;
}
        section#ctc + section > div div:nth-of-type(1) p span {
          margin-top: 110px;
}
      section#ctc + section > div div:nth-of-type(2) {
        background: url(../img/bg_section0402.png) no-repeat 0 100%;
}
      section#ctc + section > div div:nth-of-type(3) {
        margin-right: 0;
        background: url(../img/bg_section0403.png) no-repeat 0 100%;
}
section#inquiry {
  background: none;
  position: relative;
  z-index: 99;
  transform: none;
  margin-top: -270px;
  padding: 0;
}
  section#inquiry > div {
    background: none;
    position: relative;
    z-index: 99;
    transform: none;
    padding: 200px 0 150px 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) {
        background: url(../img/bg_inquiry_hmm.png) no-repeat 5% 0;
        float: left;
}
      section#inquiry > div > div:nth-of-type(2) {
        background: url(../img/bg_inquiry_hwg.png) no-repeat 5% 0;
        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;
}
      section#inquiry > div > div a:hover {
        color: #fff;
}
      section#inquiry > div > div a:before {
        content: "AzureをCTCで「選ぶ」";
        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;
}
      section#inquiry > div > div:nth-of-type(2) a:before {
        content: "お問い合わせ";
}

/* hover azure */
/* hover ctc */
/* Azure area
------------------------------------------------------------*/
/* 01 */
/* text */
/* 02 */
/* CTC area
------------------------------------------------------------*/
/* 03 */
/* 04 */
/* Inquiry
------------------------------------------------------------*/
/* hover inquiry 01 */
/* hover inquiry 02 */
/* 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;
}
      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;
}
      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);
}

/* hover */
/* arrow */
/* ===========================================================

   animation

=========================================================== */
section#ctc > div div.right h3:nth-of-type(1) + ul + div {
  animation: spin 10s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
}
  100% {
    transform: rotate(360deg);
}
}