@charset "UTF-8";
/* CSS Document */

/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
.block-index-01 ul,
.block-index-01 ul li {margin: 0;}
.block-index-02 {padding: 9em 0 3em;}
.block-index-02 .container {width: 90%;max-width: 1100px;margin: 0 auto;position: relative;}
.block-index-02 .container div {width: 55%;max-width: 600px;padding: 6em 5em 3em;background: #fff;border-radius: 0.4em;box-sizing: border-box;position: relative;z-index: 1;}
.block-index-02 .container div h3 {color: var(--codate-color2);font-size: 156.25%;font-weight: bold;}
.block-index-02 .container div h3 strong {font-size: 64%;position: absolute;top: 1em;left: 1.5em;z-index: 1;}
.block-index-02 .container div h3 strong::after {display: block;content: attr(data-num);font-size: 650%;letter-spacing: 0;background: var(--codate-grad3);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;color: transparent;position: absolute;top: 50%;left: 0.25em;transform: translateY(-50%);z-index: -1;}
.block-index-02 .container div p {font-size: 87.5%;margin-top: 1.5em;}
.block-index-02 .container figure {display: block;content: '';width: calc(100% - 5em);height: 100%;border-radius: 0.4em;position: absolute;top: -5em;}
#reason-03 .block-index-02,
#reason-01 .block-index-02 {background: linear-gradient(130deg, #d7e4ee 0%, #eaf3f8 100%);}
#reason-04 .block-index-02,
#reason-02 .block-index-02 {background: linear-gradient(130deg, #ccdde9 0%, #d6e2ea 100%);}
#reason-03 .block-index-02 figure,
#reason-01 .block-index-02 figure {left: 0;}
#reason-04 .block-index-02 figure,
#reason-02 .block-index-02 figure {right: 0;}
#reason-03 .container div,
#reason-01 .container div {margin: 0 0 0 auto;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (max-width: 1450px) {
  .block-index-02 .container div {padding: 5em 3em 2em;}
  .block-index-02 .container div h3 {font-size: 137.5%;}
}
@media only screen and (min-width: 769px) and (max-width: 1450px) {
  .nav-style-01 {max-width: 55em;}
}
@media only screen and (min-width: 1025px) {}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (max-width: 1024px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  .block-index-02 .container div {width: 95%;padding: 4em 5% 5%;}
  .block-index-02 .container div p {font-size: 100%;margin-top: 0.75em;}
  .block-index-02 {padding: 8em 0 3em;}
  .block-index-02 .container figure {width: 100vw;height: 12em;border-radius: 0;top: -8em;left: -5vw !important;overflow: hidden;}
  .block-index-02 .container div {width: 100%;}
  #reason-01 .block-index-02 {padding-top: 11em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}