@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 
/* CSS Document */

/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
.block-index-02 {padding: 3em 0;}
.block-index-02 .container {width: 90%;max-width: 1100px;margin: 3em auto 0;}
.block-index-02 .container > div {display: flex;flex-wrap: wrap;justify-content: space-between;}
.block-index-02 .container > div div {position: relative;}
.block-index-02 .container > div div:nth-child(1) {width: 44%;}
.block-index-02 .container > div div:nth-child(2) {width: 49%;}
.block-index-02 .container > div + div {flex-direction: row-reverse;margin-top: 4em;}
.block-index-02 .container > div .swiper-combination ul,
.block-index-02 .container > div .swiper-combination ul li {height: auto;margin: 0;}
.block-index-02 .container > div .swiper-combination .swiper-pagination {margin: 1em auto 0;z-index: 4;}
.block-index-02 .container > div .swiper-combination .swiper-pagination .swiper-pagination-bullet {background: #d2dede;opacity: 1;}
.block-index-02 .container > div .swiper-combination .swiper-pagination .swiper-pagination-bullet-active {background: var(--codate-color4);}
.block-index-02.strengths-01 {padding: 3em 0 4em;}
.block-index-02.strengths-02 {padding: 4em 0;background: #f1f6f6;}
.block-index-02.strengths-03 {padding: 4em 0;}
.block-index-02.strengths-03 .container > div {flex-direction: row-reverse;}
.block-index-03 {padding: 3em 0 5em;background: var(--codate-color4);}
.block-index-03 .container:nth-child(1) {color: #fff;text-align: center;}
.block-index-03 .container:nth-child(1) h3 {font-size: 187.5%;font-weight: bold;letter-spacing: 0.1em;}
.block-index-03 .container:nth-child(1) h3 strong {display: block;color: #fbec43;font-size: 46.66%;}
.block-index-03 .container:nth-child(1) h3 strong::before,
.block-index-03 .container:nth-child(1) h3 strong::after {display: inline-block;content: "";width: 2px;height: 1.2em;margin: 0 1.5em;background: #fbec43;vertical-align: sub;}
.block-index-03 .container:nth-child(1) h3 strong::before {transform: rotate(-15deg);}
.block-index-03 .container:nth-child(1) h3 strong::after {transform: rotate(15deg);}
.block-index-03 .container:nth-child(1) h3 strong span {font-family: "Barlow Condensed", sans-serif;color: transparent;font-size: 233.33%;line-height: 1;-webkit-text-stroke: 1.5px #fbec43;margin: 0 0.15em;}
.block-index-03 .container:nth-child(1) h3 + p {font-size: 87.5%;margin-top: 2em;}
.block-index-03 .container:nth-child(2) {width: calc(100% - 2.8em);max-width: 1100px;margin: 2em auto 0;padding: 3em;box-sizing: border-box;background: #f5f5f5;border-radius: 0.4em;}
.block-index-03 .container:nth-child(2) ul {max-width: 780px;margin: 0 auto;}
.block-index-03 .container:nth-child(2) ul li {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 0;}
.block-index-03 .container:nth-child(2) ul li + li::before {display: block;content: '';width: 100%;height: 1px;margin: 2em 0;background: repeating-linear-gradient(to right,var(--codate-color4) 0 1px,transparent 1px 3px);}
.block-index-03 .container:nth-child(2) ul li div {width: 65%;}
.block-index-03 .container:nth-child(2) ul li div p:nth-child(1) {color: var(--codate-color4);font-size: 156.25%;font-weight: bold;padding: 0.3em 0 0 1.75em;margin: 0;position: relative;}
.block-index-03 .container:nth-child(2) ul li div p:nth-child(1) > span {font-size: 40%;text-align: center;position: absolute;left: 0;bottom: 0.5em;}
.block-index-03 .container:nth-child(2) ul li div p:nth-child(1) > span span {display: block;color: transparent;font-size: 350%;font-family: "Barlow Condensed", sans-serif;line-height: 1;-webkit-text-stroke: 1.5px var(--codate-color4);}
.block-index-03 .container:nth-child(2) ul li div p:nth-child(2) {font-size: 87.5%;margin: 1.5em 0 0;}
.block-index-03 .container:nth-child(2) ul li figure {width: 30%;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1450px) {
  .ttl-style-05 {font-size: 175%;}
  .ttl-style-06 h4 {font-size: 137.5%;}
  .block-index-03 .container:nth-child(1) h3 {font-size: 137.5%;}
  .block-index-03 .container:nth-child(1) h3 + p {margin-top: 1.5em;}
  .block-index-03 .container:nth-child(2) ul li div p:nth-child(1) {font-size: 137.5%;}
}
@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 {margin-top: 1.5em;}
  .block-index-02 .container > div {padding-bottom: 6em;position: relative;}
  .block-index-02 .container > div div {width: 100% !important;position: static;}
  .block-index-02 .container > div div:nth-child(2) {margin-top: 1.5em;}  
  .block-index-02 .container > div div .btn-style-05 {margin: 0 auto;position: absolute;left: 0;right: 0;bottom: 0;}
  .block-index-02.strengths-01 {padding: 2em 0 3em;}
  .block-index-02.strengths-02 {padding: 3em 0;}
  .block-index-02.strengths-03 {padding: 3em 0;}
  .block-index-03 {padding: 3em 0;}
  .block-index-03 .container:nth-child(1) h3 {font-size: 175%;line-height: 1.5;}
  .block-index-03 .container:nth-child(1) h3 strong {font-size: 70%;margin-bottom: 1em;}
  .block-index-03 .container:nth-child(1) h3 + p {font-size: 100%;}
  .block-index-03 .container:nth-child(2) {padding: calc(5vw + 1em) 5vw 5vw;}
  .block-index-03 .container:nth-child(2) ul li + li::before {margin: 1em 0 2em;}
  .block-index-03 .container:nth-child(2) ul li div {width: 64%;}
  .block-index-03 .container:nth-child(2) ul li div p:nth-child(1) {font-size: 137.5%;}
  .block-index-03 .container:nth-child(2) ul li div p:nth-child(1) > span {font-size: 50%;}
  .block-index-03 .container:nth-child(2) ul li div p:nth-child(2) {font-size: 100%;margin-top: 1em;}
  .block-index-03 .container:nth-child(2) ul li figure {width: 33%;height: 8em;border-radius: 0.4em;overflow: hidden;}
  .block-index-03 .container:nth-child(2) ul li figure img {height: 100%;object-fit: cover;}  
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}