@charset "UTF-8";
/* 

common 
PC：960px〜
Tablet：959px〜
SP：640px〜 

*/
/* 
	base 
*/
html {
  font-size: 62.5%;
  scroll-behavior: smooth; }

body {
  position: relative;
  margin: 0 !important;
  padding: 0;
  font-family: "noto-sans-cjk-jp","Noto Serif JP",sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  font-feature-settings: "palt" 1;
  letter-spacing: 1px;
  line-height: 1.6;
  color: #333; }

a {
  display: block;
  text-decoration: none;
  color: #333; }

h1, h2, h3 {
  margin: 0; }

p {
  margin: 0 0 10px;
  padding: 0; }

img, svg {
  max-width: 100%;
  height: auto; }

div:focus,
form :focus {
  outline: 0; }

ul, ol, dd {
  margin: 0;
  padding: 0; }

ul {
  list-style: none; }

.img {
  line-height: 0; }

.onlypc {
  display: block;
  margin: 0 auto; }

.onlytb {
  display: none; }

.onlysp {
  display: none; }

.svg-container {
  display: none; }

.inner {
  width: 94%;
  max-width: 960px;
  margin: auto; }

small {
  display: block; }

.ttl-01 {
  margin-bottom: 40px; }
  .ttl-01 b {
    display: table;
    margin: 0 auto 15px auto;
    padding: 1% 8%;
    background: #004584;
    font-size: 26px;
    color: #fff; }

header {
  position: relative;
  padding: 20px; }
  header::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url("../assets/img/bg-top.png") no-repeat;
    background-size: contain;
    z-index: 100; }
    @media (min-width: 1800px) {
      header::after {
        background-size: cover; } }
  header h1 {
    position: relative;
    z-index: 101;
    margin-bottom: 40px; }
  header h2 {
    text-align: center; }
  header .logo-ttl {
    position: relative;
    z-index: 101; }

main {
  padding: 60px 0;
  background: url("../assets/img/bg-main.png");
  background-size: contain; }
  main .block-01 {
    position: relative;
    z-index: 101;
    margin-bottom: 200px; }
    main .block-01 .icon {
      margin-bottom: 80px;
      text-align: center; }
    main .block-01 .step-box {
      display: flex;
      flex-flow: wrap;
      justify-content: space-between;
      margin-bottom: 100px; }
      main .block-01 .step-box .step {
        width: 32%; }
        main .block-01 .step-box .step .ttl {
          margin-bottom: 30px;
          text-align: center;
          font-size: 30px; }
          main .block-01 .step-box .step .ttl b {
            display: block;
            padding-bottom: 3px;
            border-bottom: 1px solid #555;
            font-size: 18px; }
        main .block-01 .step-box .step .img {
          margin-bottom: 40px; }
    main .block-01 .dl-box {
      display: flex;
      flex-flow: wrap;
      justify-content: space-evenly; }
      main .block-01 .dl-box .item {
        width: 40%;
        font-size: 20px;
        text-align: center; }
  main .block-02 {
    margin-bottom: 200px;
    padding: 50px 0;
    overflow: hidden; }
    main .block-02 .box-01 {
      position: relative;
      display: flex;
      flex-flow: wrap;
      justify-content: flex-end;
      margin-bottom: 100px;
      font-size: 18px; }
      main .block-02 .box-01::before {
        position: absolute;
        content: "";
        top: 4%;
        right: -28%;
        background-image: url("../assets/img/arrow.png");
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        transform: rotate(-10deg); }
      main .block-02 .box-01 .ttl-01 {
        margin-bottom: 15px;
        transform: rotate(-4deg); }
        main .block-02 .box-01 .ttl-01 b {
          display: inline-block; }
      main .block-02 .box-01 .detail {
        padding: 0 15%; }
      main .block-02 .box-01 p {
        margin: 30px 0;
        font-weight: 500; }
    main .block-02 .box {
      position: relative;
      z-index: 1;
      width: 60%; }
    main .block-02 .box-02 {
      position: relative; }
      main .block-02 .box-02::before {
        position: absolute;
        content: "";
        top: -9%;
        left: -18%;
        background-image: url("../assets/img/arrow.png");
        background-size: contain;
        background-repeat: no-repeat;
        width: 120%;
        height: 120%;
        transform: rotate(10deg); }
      main .block-02 .box-02 .ttl-01 {
        transform: rotate(4deg); }
      main .block-02 .box-02 .img {
        padding-left: 15%; }
  main .block-03 {
    color: #fff; }
    main .block-03 .ttl {
      text-align: center; }
    main .block-03 .point-box {
      padding: 10% 0;
      background: #184a79; }
      main .block-03 .point-box .inner {
        max-width: 680px; }
    main .block-03 .point {
      display: flex;
      flex-flow: wrap;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 40px;
      font-size: 22px;
      position: relative; }
      main .block-03 .point .icon {
        position: relative;
        z-index: 1; }
      main .block-03 .point:nth-child(even) .icon::before {
        position: absolute;
        content: "";
        bottom: -14px;
        right: 88px;
        width: 360px;
        height: 4px;
        background: #fff;
        transform: skewY(-33deg);
        z-index: -1; }
      main .block-03 .point:nth-child(odd) .icon::before {
        position: absolute;
        content: "";
        bottom: -14px;
        left: 88px;
        width: 360px;
        height: 4px;
        background: #fff;
        transform: skewY(33deg);
        z-index: -1; }
      main .block-03 .point:last-child .icon::before {
        display: none; }
      main .block-03 .point a {
        color: #fff; }

footer {
  padding-bottom: 16.4285714286%;
  text-align: center;
  background: url("../assets/img/bg-footer.png") no-repeat;
  background-size: cover;
  background-position: right; }

/* 
	TB 959px〜 
*/
@media (max-width: 959px) {
  .onlytb {
    display: block; }

  header .logo-ttl {
    max-width: 400px;
    margin: 0 auto; }

  main .block-01 {
    margin-bottom: 100px; }
    main .block-01 .step-box .step {
      width: 60%;
      margin: 0 auto 50px; }
      main .block-01 .step-box .step:last-child {
        margin-bottom: 0; }
    main .block-01 .dl-box .item {
      width: 35%; }
  main .block-02 {
    margin-bottom: 100px; }
    main .block-02 .ttl-01 b {
      padding: 1% 6%;
      font-size: 22px; }
    main .block-02 .box {
      width: 70%; }
    main .block-02 .box-01::before {
      right: -18%; }
  main .block-03 .ttl {
    max-width: 300px;
    margin: 0 auto; } }
/* 
	SP 640px〜 
*/
@media (max-width: 500px) {
  .onlypc {
    display: none !important; }

  .onlytb {
    display: none; }

  .onlysp {
    display: block !important; }

  .ttl-01 {
    margin-bottom: 20px; }
    .ttl-01 b {
      margin-bottom: 10px;
      font-size: 20px; }

  header {
    padding: 10px; }
    header h1 {
      width: 35%;
      margin: auto auto 30px;
      text-align: center; }
    header .logo-ttl {
      max-width: 300px; }

  main {
    padding: 20px 0 40px; }
    main .block-01 {
      margin-bottom: 50px; }
      main .block-01 .icon {
        margin-bottom: 25px; }
        main .block-01 .icon img {
          max-width: 45%; }
      main .block-01 .step-box {
        margin-bottom: 50px; }
        main .block-01 .step-box .step {
          width: 90%;
          margin-bottom: 20px; }
          main .block-01 .step-box .step .ttl b {
            font-size: 18px; }
      main .block-01 .dl-box .item {
        width: 60%; }
        main .block-01 .dl-box .item:first-child {
          margin-bottom: 30px; }
        main .block-01 .dl-box .item p {
          margin-bottom: 0; }
    main .block-02 {
      margin-bottom: 80px;
      padding: 50px 0;
      overflow: hidden; }
      main .block-02 .ttl-01 b {
        padding: 1% 4%;
        font-size: 20px; }
      main .block-02 .box-01 {
        padding: 0;
        font-size: 15px; }
        main .block-02 .box-01::before {
          top: 2%;
          left: 35px;
          width: 153%;
          height: 153%; }
        main .block-02 .box-01 .box {
          width: 85%; }
        main .block-02 .box-01 .ttl-01 {
          margin-bottom: 10px; }
        main .block-02 .box-01 .detail {
          padding: 0 2% 0 10%; }
        main .block-02 .box-01 .img {
          width: 85%;
          margin: 0 auto;
          text-align: center; }
        main .block-02 .box-01 p {
          margin: 20px 0; }
      main .block-02 .box-02::before {
        width: 120%;
        height: 120%; }
      main .block-02 .box-02 .box {
        width: 90%; }
    main .block-03 .ttl {
      max-width: 240px;
      margin: 0 auto; }
    main .block-03 .point-box .inner {
      width: 86%; }
    main .block-03 .point {
      justify-content: space-between;
      font-size: 16px;
      line-height: 1.4em;
      font-weight: bold; }
      main .block-03 .point .icon {
        width: 30%; }
      main .block-03 .point p {
        width: 65%; }
      main .block-03 .point:nth-child(even) p {
        width: 60%;
        padding-left: 5%; }
      main .block-03 .point:nth-child(even) .icon::before {
        bottom: -15px;
        right: 55px;
        width: 240px;
        transform: skewY(-34deg); }
      main .block-03 .point:nth-child(odd) .icon::before {
        bottom: -35px;
        left: 55px;
        width: 240px;
        transform: skewY(34deg); } }
/* 
	SP 320px〜 
*/
@media (max-width: 320px) {
  main .block-03 .ttl {
    max-width: 200px; }
  main .block-03 .point-box .inner {
    width: 90%; }
  main .block-03 .point {
    font-size: 12px; }
    main .block-03 .point .icon {
      width: 30%; }
    main .block-03 .point p {
      width: 65%; }
    main .block-03 .point:nth-child(even) p {
      width: 57%;
      padding-left: 5%; }
    main .block-03 .point:nth-child(even) .icon::before {
      bottom: -15px;
      right: 55px;
      width: 200px;
      transform: skewY(-34deg); }
    main .block-03 .point:nth-child(odd) .icon::before {
      bottom: -23px;
      left: 55px;
      width: 200px;
      transform: skewY(34deg); } }