@charset "UTF-8";

.contents01-block01-r p span, .contents01-block02-r p span{color: #FC6100;font-weight: 700;}

@media screen and (min-width: 768px), print {
  /* PCのCSS */
  .sp {
    display: none;
  }
  .seo_bread_list a,
  .seo_bread_list {
    font-size: 14px;
  }
  #contentsmain {
    height: 670px;
    background: url("../images/roadmap/contentsmain-bg.png") bottom center
      no-repeat;
    letter-spacing: 0;
    font-weight: 400;
  }

  #contentsmain .inner-Box {
    width: 1180px;
    height: 580px;
    margin: 0 auto;
    padding-top: 29px;
    background: url("../images/roadmap/contentsmain-bg02.png") bottom center;
    text-align: center;
    position: relative;
  }
  #contentsmain .inner-Box h2 {
    margin-bottom: 28px;
  }
  #contentsmain .contentsmain-img {
    margin-top: -40px;
  }
  #contentsmain .contentsmain-man {
    position: absolute;
    bottom: -97px;
    right: 62px;
  }
  #contents01 {
    background: #0a3a72;
    padding: 60px 0 40px;
    text-align: center;
    letter-spacing: 0;
  }
  #contents01 .inner-Box {
    width: 1100px;
    margin: 0 auto;
  }
  .contents01-block01,
  .contents01-block02 {
    display: flex;
    justify-content: space-between;
  }

  .contents01-block01 {
    margin-bottom: 42px;
  }

  .contents01-block01-r {
    margin-top: 24px;
  }
  .contents01-block01-r,
  .contents01-block02-r {
    width: 735px;
    position: relative;
  }
  .contents01-block02 .contents01-block02-r {
    order: 1;
    margin-top: 60px;
    position: relative;
  }
  .contents01-block02 figure {
    order: 2;
  }

  .contents01-block01-r p,
  .contents01-block02-r p {
    padding: 39px 30px 39px 43px;
    font-weight: 500;
    text-align: left;
    font-size: 21px;
    line-height: 2;
    position: absolute;
    top: 0;
    left: 20px;
  }
  .contents01-block02-r p {
    padding: 32px 60px 45px 35px;
  }
  .contents01-block01-r p .orange,
  .contents01-block02-r p .orange {
    color: #fc6100;
  }
  #contents02 {
    padding: 70px 0 0;
    background: url("../images/roadmap/contents02-bg.png") center 100%;
    text-align: center;
  }
  #contents02 .inner-Box {
    width: 1100px;
    margin: 0 auto;
    display: flex;
    z-index: 2;
    position: relative;
    justify-content: space-between;
    margin-top: 30px;
    line-height: 1.75;
  }
  #contents02 .contents02-leftarea {
    width: 520px;
  }
  #contents02 .contents02-leftarea-inner {
    margin-top: 22px;
  }

  #contents02 .fl01{ position: relative; background: url(../images/roadmap/contents02-flback01.png)no-repeat;height: 293px;text-align: left;padding: 48px 27px 0 149px;margin-bottom: 6px;}
  #contents02 .fl01 p{font-size: 16px;letter-spacing: 0.8px;line-height: 1.75;color: #fff; font-weight: 500;}
  #contents02 .fl01::before{ content: ""; width: 2px; height: 864px; background: #FC6100; position: absolute; top: 20px; left: 60px; z-index: -1; }

  #contents02 .fl02{background: url(../images/roadmap/contents02-flback02.png)no-repeat;height: 266px;text-align: left;padding: 48px 27px 0 149px;}
  #contents02 .fl02 p{font-size: 16px;letter-spacing: 0.8px;line-height: 1.75; font-weight: 500;}

  #contents02 .fl03{background: url(../images/roadmap/contents02-flback03.png)no-repeat;height: 300px;text-align: left;padding: 48px 27px 0 149px;}
  #contents02 .fl03 p{font-size: 16px;letter-spacing: 0.8px;line-height: 1.75;color: #fff; font-weight: 500;}

  #contents02 .fl04{background: url(../images/roadmap/contents02-flback04.png)no-repeat;height: 345px;text-align: left;padding: 48px 27px 0 149px;}
  #contents02 .fl04 p{font-size: 16px;letter-spacing: 0.8px;line-height: 1.75; font-weight: 500;}

  .contents02-rightarea-inner{margin: 22px 0 0;}
  #contents02 .fl05{position: relative;background: url(../images/roadmap/contents02-flback05.png)no-repeat;height: 293px;text-align: left;padding: 48px 27px 0 149px;margin-bottom: 6px;}
  #contents02 .fl05 p{font-size: 16px;letter-spacing: 0.8px;line-height: 1.75;color: #fff; font-weight: 500;}
  #contents02 .fl05::before{ content: ""; width: 2px; height: 300px; background: #0A3A72; position: absolute; top: 20px; left: 60px; z-index: -1; }
  
  #contents02 .fl06{background: url(../images/roadmap/contents02-flback06.png)no-repeat;height: 919px;text-align: left;padding: 48px 27px 0 149px;}
  #contents02 .fl06 p{font-size: 16px;letter-spacing: 0.8px;line-height: 1.75; font-weight: 500;}



  #contents02 .contents02-rightarea {
    width: 520px;
    text-align: left;
  }
  #tab-left,
  #tab-right {
    display: none;
  }

  #contents03 {
    position: relative;
    margin-top: -139px;
    z-index: 1;
    background: url(../images/roadmap/contents02-bg.png) center 100%;
  }
  #contents03 .inner-Box {
    background: url("../images/roadmap/contents03-bg.png") center no-repeat;
    text-align: center;
    height: 416px;
  }
  #contents03 figure {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
  }
  #contents04 {
    background: url(../images/roadmap/contents02-bg.png) center 100%;
    letter-spacing: 0;
    font-weight: 400;
  }
  #contents04 .contents04-list {
    display: flex;
    margin: 0 auto;
    padding-top: 17px;
    width: 1200px;
    padding-bottom: 80px;
    justify-content: space-between;
  }
  #contents04 .contents04-list li {
    width: 590px;
    line-height: 1.75;
  }
  #contents04 .contents04-list li h3 {
    font-size: 28px;
    color: #0a3a72;
    font-weight: 900;
    text-align: center;
    margin-bottom: 5px;
  }
  .contents04-list-text {
    background-color: #fff;
    margin: 0 auto;
    width: 480px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16);
    margin-top: -60px;
    position: relative;
    z-index: 1;
    padding: 26px 30px 40px;
  }
  #contents05 {
    padding-top: 106px;
    text-align: center;
  }

  #contentsbottom .inner-Box2 {
    margin: 0 auto;
    position: relative;
    width: 1100px;
  }
  #contentsbottom .inner-Box2 ul {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #contentsbottom .inner-Box2 ul li {
    position: relative;
    width: 340px;
    margin-right: 40px;
  }
  #contentsbottom .inner-Box2 ul li:nth-child(3n) {
    margin-right: 0px;
  }
  #contentsbottom .inner-Box2 ul li a {
  }
  #contentsbottom .inner-Box2 ul li a:hover {
  }
  #contentsbottom .inner-Box2 figure {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 0 15px;
  }
  #contentsbottom .inner-Box2 figure img {
  }
  #contentsbottom .inner-Box2 p.ltext {
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
    letter-spacing: 0px;
    margin-bottom: 30px;
    position: relative;
  }
  #contentsbottom {
    padding: 110px 0 60px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1450px) {
  /* ブレイクポイント　必要であれば */
}

@media screen and (max-width: 767px) {
  /* SPのCSS */
  .pc {
    display: none;
  }
  #contentsmain {
    padding: 3.08vw 4.11vw 6vw;
    background: url("../images/roadmap/sp-contentsmain-bg.png") repeat-x bottom
      center;
    background-position: center 84px;
  }
  #contentsmain .inner-Box {
    background: url("../images/roadmap/sp-contents02-bg.png") repeat bottom
      center;
    padding: 0;
    background-position: center 11.11vw;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #contentsmain p {
    font-size: 3.86vw;
    margin-bottom: 3.38vw;
    text-align: center;
  }
  #contentsmain h2 {
    padding: 7vw 7.49vw;
  }
  .contentsmain-man {
    display: none;
  }
  .contentsmain-img {
    margin: 3vw;
  }
  #contents01 {
    background-color: #0a3a72;
    padding: 9.66vw 4.11vw;
  }

  .contents01-block01-r {
    padding: 0;
    margin-top: 0;
    margin-bottom: 12.08vw;
    font-size: 4.35vw;
    line-height: 1.78;
    position: relative;
  }
  .contents01-block01-r p{position: absolute;top: 8vw;left: 0;font-size: 4.35vw;letter-spacing: 0vw;line-height: 1.78;padding: 3vw 5vw;font-weight: 500;}
  .contents01-block02-r p{position: absolute;top: 8vw;left: 0;font-size: 4.35vw;letter-spacing: 0vw;line-height: 1.78;padding: 3vw 5vw;font-weight: 500;}


  .contents01-block02-r {
    margin-top: 0;
    padding: 0;
    font-size: 4.35vw;
    line-height: 1.78;
    position: relative;
  }

  #contents02 {
    padding: 16vw 0 0;
    background: url("../images/roadmap/contents02-bg.png") center 100%;
    text-align: center;
    margin-bottom: -15vw;
  }
  .contents02-ttl {
    margin: 0 4.35vw 7.25vw;
  }
  .contents02-rightarea {
    display: none;
  }

  .contents02-tab li.active {
    font-weight: bold;
    border-bottom: 2px solid #000;
  }

  .contents02-leftarea-inner,
  .contents02-rightarea-inner {
    padding: 0 3.62vw 0 0;
    position: relative;
    z-index: 1;
  }

  .tab-btn {
    display: block;
    width: 47vw;
    height: 22vw;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  .tab-left {
    background-image: url("../images/roadmap/sp-tab01.png");
  }
  .tab-right {
    background-image: url("../images/roadmap/sp-tab02.png");
  }

  #tab-left:checked ~ .contents02-tab .tab-left {
    background-image: url("../images/roadmap/sp-tab01-o.png");
  }
  #tab-right:checked ~ .contents02-tab .tab-right {
    background-image: url("../images/roadmap/sp-tab02-o.png");
  }

  #contents02 input {
    display: none;
  }

  .contents02-tab {
    display: flex;
    margin: 0 1.21vw;
    justify-content: space-between;
    margin-bottom: 4.83vw;
  }

  .tab-content {
    display: none;
  }

  #tab-left:checked ~ .inner-Box .contents02-leftarea {
    display: block;
  }

  #tab-right:checked ~ .inner-Box .contents02-rightarea {
    display: block;
  }

  .contents02-tab label {
    cursor: pointer;
    display: block;
  }

  #tab-left:checked ~ .contents02-tab label[for="tab-left"],
  #tab-right:checked ~ .contents02-tab label[for="tab-right"] {
    opacity: 1;
  }

  #contents02 .fl01{position: relative;background: url(../images/roadmap/sp-contents02-flback01.png)no-repeat;height: 71.77vw;text-align: left;padding: 4.19vw 6.52vw 0 28.99vw;margin-bottom: 0.45vw;background-size: 100% auto;margin-left: 1.2vw;}
  #contents02 .fl01 p{font-size: 3.86vw;letter-spacing: 0.19vw;line-height: 1.75;color: #fff; font-weight: 500;}
  #contents02 .fl01::before{content: "";width: 0.48vw;height: 200vw;background: #FC6100;position: absolute;top: 4.83vw;left: 12.39vw;z-index: -1;}
  
  #contents02 .fl02{background: url(../images/roadmap/sp-contents02-flback02.png)no-repeat;height: 64.25vw;text-align: left;padding: 4.19vw 6.52vw 0 28.99vw;background-size: 100% auto;margin-left: 1.2vw;}
  #contents02 .fl02 p{font-size: 3.86vw;letter-spacing: 0.19vw;line-height: 1.75; font-weight: 500;}
  
  #contents02 .fl03{background: url(../images/roadmap/sp-contents02-flback03.png)no-repeat;height: 65.26vw;text-align: left;padding: 4.19vw 5.62vw 0 28.99vw;background-size: 100% auto;margin-left: 1.2vw;}
  #contents02 .fl03 p{font-size: 3.86vw;letter-spacing: 0.19vw;line-height: 1.75;color: #fff; font-weight: 500;}
  
  #contents02 .fl04{background: url(../images/roadmap/sp-contents02-flback04.png)no-repeat;height: 100.33vw;text-align: left;padding: 4.19vw 6.52vw 0 28.99vw;background-size: 100% auto;margin-left: 1.2vw;z-index: 3;position: relative;}
  #contents02 .fl04 p{font-size: 3.86vw;letter-spacing: 0.19vw;line-height: 1.75; font-weight: 500;}
  
  .contents02-rightarea-inner{margin: 5.31vw 0 0;}
  #contents02 .fl05{position: relative;background: url(../images/roadmap/sp-contents02-flback05.png)no-repeat;height: 76.77vw;text-align: left;padding: 4.19vw 6.52vw 0 28.99vw;margin-bottom: 1.45vw;background-size: 100% auto;margin-left: 1.2vw;}
  #contents02 .fl05 p{font-size: 3.86vw;letter-spacing: 0.19vw;line-height: 1.75;color: #fff; font-weight: 500;}
  #contents02 .fl05::before{ content: ""; width: 0.48vw; height: 72.46vw; background: #0A3A72; position: absolute; top: 4.83vw; left: 14.49vw; z-index: -1; }
  
  #contents02 .fl06{background: url(../images/roadmap/sp-contents02-flback06.png)no-repeat;height: 166vw;text-align: left;padding: 4.19vw 6.52vw 0 28.99vw;background-size: 100% auto;margin-left: 1.2vw;}
  #contents02 .fl06 p{font-size: 3.86vw;letter-spacing: 0.19vw;line-height: 1.75; font-weight: 500;}
  

  .contents02-tab label {
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }

  #contents03 {
    padding-bottom: 2.42vw;
    margin-top: -7.25vw;
    background: url(../images/roadmap/contents02-bg.png) center 100%;
  }

  #contents04 {
    padding: 0 4.11vw 0.1vw;
    background: url(../images/roadmap/contents02-bg.png) center 100%;
    line-height: 1.75;
  }
  #contents04 li {
    margin-bottom: 9.66vw;
  }
  .contents04-list-text {
    margin: 0 2.42vw;
    padding: 7.25vw 6.04vw;
    background-color: #fff;
    margin-top: -7.25vw;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16);
    position: relative;
    z-index: 2;
  }
  .contents04-list-text h3 {
    font-size: 5.8vw;
    font-weight: 900;
    color: #0a3a72;
    margin-bottom: 3.62vw;
    text-align: center;
  }

  #contents05 {
    padding: 9.66vw 4.11vw;
  }

  #contentsbottom .inner-Box2 {
    margin: 0 9vw;
    position: relative;
  }
  #contentsbottom .inner-Box2 ul {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #contentsbottom .inner-Box2 ul li {
    position: relative;
    margin-bottom: 0.66vw;
  }
  #contentsbottom .inner-Box2 ul li:nth-child(3n) {
    margin-right: 0vw;
  }
  #contentsbottom .inner-Box2 ul li a {
  }
  #contentsbottom .inner-Box2 ul li a:hover {
  }
  #contentsbottom .inner-Box2 figure {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 0 3.62vw;
  }
  #contentsbottom .inner-Box2 figure img {
  }
  #contentsbottom .inner-Box2 p.ltext {
    font-size: 3.86vw;
    line-height: 1.75;
    font-weight: 400;
    letter-spacing: 0vw;
    margin-bottom: 7.25vw;
    position: relative;
  }
}