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

/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
.block-index-01 ul {margin: 0;}
.block-index-01 ul li {margin: 0;position: relative;}
.block-index-02 {padding: 3em 0 0;position: relative;z-index: 1;}
.block-index-02 .container {display: flex;flex-wrap: wrap;justify-content: space-between;width: 90%;max-width: 1100px;margin: 3em auto 0;position: relative;z-index: 1;}
.block-index-02 .container div {width: 51%;}
.block-index-02 .container figure {width: 46%;}
.block-index-03 .container {position: relative;z-index: 1;}
.block-index-03 .container {padding: 5em 0;}
.block-index-03 .container > div {width: calc(100% - 2.8em);max-width: 1100px;margin: 0 auto;}
.block-index-03 .container .ttl-style-02 {padding: 0 0 0 1.5em;}
.block-index-03 .container .ttl-style-02::before {background: linear-gradient(to bottom, #0c6698, #2583b8);left: 0;right: auto;}
.block-index-03 .container .ttl-style-02 h5 {color: var(--codate-color2);font-size: 125%;}
.block-index-03 .container .note {font-size: 75%;margin-top: 1.5em;}
.block-index-03 .container .voice {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;max-width: 1010px;margin: 4em auto 0;padding: 0.2em;background: #f8f6f5;border-radius: 0.2em;}
.block-index-03 .container .voice div {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;width: 77%;padding: 0.5em;box-sizing: border-box;}
.block-index-03 .container .voice div p {margin: 0;box-sizing: border-box;}
.block-index-03 .container .voice div p:nth-child(1) {color: #93867e;font-size: 125%;letter-spacing: 0.1em;text-align: center;width: 33%;padding: 0 1em;position: relative;z-index: 1;}
.block-index-03 .container .voice div p:nth-child(1) svg {color: #f1e6db;width: 4.5em;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: -1;}
.block-index-03 .container .voice div p:nth-child(2) {color: var(--codate-color3);font-size: 87.5%;width: 67%;padding: 0 0 0 2.5em;position: relative;}
.block-index-03 .container .voice div p:nth-child(2)::before {display: block;content: '';width: 1px;height: 90%;background: var(--codate-color3);position: absolute;top: 5%;left: 0;}
.block-index-03 .container .voice figure {width: 22%;border-radius: 0.2em;overflow: hidden;}
.block-index-03 .container .head {display: flex;flex-wrap: wrap;justify-content: space-between;}
.block-index-03 .container .head div:nth-child(1) {width: 50%;}
.block-index-03 .container .head div:nth-child(2) {width: 46%;}
.block-index-03 .container .list-01 {margin-top: 4em;}
.block-index-03 .container .list-01 > ul > li {display: flex;flex-wrap: wrap;justify-content: space-between;}
.block-index-03 .container .list-01 > ul > li + li {margin-top: 4em;}
.block-index-03 .container .list-01 > ul > li div:nth-child(1) p:not(.note) {font-size: 87.5%;margin-top: 2em;}
.block-index-03 .container .list-01 > ul > li div:nth-child(1) p:not(.note) strong {color: var(--codate-color2);font-weight: bold;}
.block-index-03 .container .list-01 > ul > li div:nth-child(1) {width: 46%;}
.block-index-03 .container .list-01 > ul > li div:nth-child(2) {width: 49%;}
.block-index-03 .container .list-02 {margin-top: 4em;}
.block-index-03 .container .list-02 > p {display: flex;align-items: center;justify-content: center;color: var(--codate-color2);font-size: 125%;font-weight: bold;text-align: center;gap: 1em;}
.block-index-03 .container .list-02 > p::before,
.block-index-03 .container .list-02 > p::after {content: "";flex: 1;height: 1px;background: var(--codate-color2);}
.block-index-03 .container .list-02 ul {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 1em -1.25em 0;}
.block-index-03 .container .list-02 ul li {width: calc(33.33% - 2.5em);margin: 0 1.25em;padding-bottom: 3em;border-radius: 0.4em;position: relative;overflow: hidden;}
.block-index-03 .container .list-02 ul li p {color: #fff;font-weight: bold;text-align: center;padding: 0.75em 0;background: #2483b7;position: absolute;left: 0;right: 0;bottom: 0;}
.block-index-03 .container .list-02 ul li p small {display: block;}
.block-index-03 .support-01 .container {margin-top: -3em;background: var(--codate-grad4);position: relative;z-index: 0;}
.block-index-03 .support-01 .container > div h4 {display: flex;align-items: center;justify-content: center;text-align: center;gap: 1em;}
.block-index-03 .support-01 .container > div h4 span {color: var(--codate-color2);font-size: 125%;font-weight: bold;}
.block-index-03 .support-01 .container > div h4::before,
.block-index-03 .support-01 .container > div h4::after {content: "";flex: 1;height: 1px;background: var(--codate-color2);}
.block-index-03 .support-01 .container > div > figure {margin-top: 1em;}
.block-index-03 .support-01 .container > div ul {display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 1.5em;}
.block-index-03 .support-01 .container > div ul > li {width: 23%;}
.block-index-03 .support-02 .container {background: var(--codate-grad4);position: relative;z-index: 1;}
.block-index-03 .support-02 .container .list-01 > ul > li div:nth-child(2) > p:nth-of-type(1) {color: var(--codate-color2);font-size: 87.5%;text-align: center;padding: 0 0.5em;margin: 0;background: #fff;border-radius: 1.5em;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table {margin: 1em 0 0;width: 100%;border-bottom: 2px solid var(--codate-color2);position: relative;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table:after {display: block;content: '';width: 0;height: 0;border-style: solid;border-width: 10px 8px 0 8px;border-color: var(--codate-color2) transparent transparent transparent;margin: 0 auto;position: absolute;top: 100%;left: 0;right: 0;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr th,
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr td {font-size: 87.5%;font-weight: bold;vertical-align: middle;padding: 1.5em 0.5em;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr:not(:last-child) th,
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr:not(:last-child) td {border-bottom: 1px solid #fff;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr th {color: #fff;text-align: center;background: #2483b7;font-weight: bold;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr td {background: #f5f5f5;border-left: 1px solid #fff;padding: 1.5em 3em;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr:nth-child(1) th {border-radius: 0.4em 0 0 0;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr:nth-child(1) td {border-radius: 0 0.4em 0 0;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr:nth-child(2) td ul li {margin: 0;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr:nth-child(2) td ul li p {display: flex;flex-wrap: wrap;font-weight: bold;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr:nth-child(2) td ul li p span:nth-child(1) {width: 7.5em;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) p:nth-of-type(2) {font-size: 87.5%;font-weight: bold;text-align: center;margin: 1.5em 0 0;}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) p:nth-of-type(2) strong {display: block;color: var(--codate-color3);font-size: 128.57%;border-bottom: 1px solid var(--codate-color3);}
.block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) p:nth-of-type(2) strong span {display: inline-block;}
.block-index-03 .support-03 .container {background: var(--codate-grad4);position: relative;z-index: 1;}
.block-index-03 .support-03 .container .head {flex-direction: row-reverse;}
.block-index-03 .support-04 .container {background: var(--codate-grad4);position: relative;z-index: 0;}
.block-index-03 .support-04 .container .head div:nth-child(1) {position: relative;}
.block-index-03 .support-04 .container .head div:nth-child(1) p {display: inline-block;color: var(--codate-color2);font-size: 87.5%;font-weight: bold;letter-spacing: 0.1em;padding: 0.2em 1em 0.15em;background: #fff;border-radius: 0.2em;position: absolute;top: -0.7em;left: -0.7em;}
.block-index-03 .support-04 .container .head div:nth-child(1) p svg {color: #fff;width: 1em;height: 1em;position: absolute;left: 2em;bottom: 0;transform: translateY(60%);}
.block-index-04 {padding: 5em 0;background: #f8f6f5;position: relative;z-index: 2;}
.block-index-04 .container h4 {text-align: center;}
.block-index-04 .container h4 span {display: inline-block;color: #93867e;font-size: 156.25%;font-weight: bold;letter-spacing: 0.1em;position: relative;}
.block-index-04 .container h4 span::before {display: block;content: '';width: 2.25em;height: 2em;background: url("../img/icon_01.svg") no-repeat center/contain;position: absolute;top: -1.25em;left: -1.6em;}
.block-index-04 .container .swiper-voice {width: 90%;max-width: calc(1100px + 4em);margin: 0 auto;padding: 2em 2em 1em;box-sizing: border-box;position: relative;overflow: hidden;}
.block-index-04 .container .swiper-voice ul {display: flex;align-items: stretch;margin: 0;}
.block-index-04 .container .swiper-voice ul li {height: auto;margin: 0;background: #fff;border-radius: 0.4em;overflow: hidden;position: relative;box-shadow: 0 4px 12px rgba(0,0,0,0);transition: 0.6s;}
.block-index-04 .container .swiper-voice ul li.swiper-slide-active,
.block-index-04 .container .swiper-voice ul li.swiper-slide-prev,
.block-index-04 .container .swiper-voice ul li.swiper-slide-next {box-shadow: 0 4px 12px rgba(0,0,0,0.2);}
.block-index-04 .container .swiper-voice ul li a {color: var(--default);text-decoration: none;}
.block-index-04 .container .swiper-voice ul li a::before {display: inline-block;color: #fff;font-size: 68.75%;padding: 0.15em 0.5em 0.12em;border-radius: 0 0 0.4em 0;position: absolute;top: 0;left: 0;}
.block-index-04 .container .swiper-voice ul li.after a::before {content: 'アフターサービス';background: var(--codate-color3);}
.block-index-04 .container .swiper-voice ul li a::after {content: "VIEW MORE  〉";color: #93867e;font-size: 75%;font-weight: 500;position: absolute;bottom: 0.5em;right: 0.5em;}
.block-index-04 .container .swiper-voice ul li a div {padding: 1em 1em 2.5em;}
.block-index-04 .container .swiper-voice ul li a div p {font-size: 87.5%;}
.block-index-04 .container .swiper-button-next,
.block-index-04 .container .swiper-button-prev {width: 2.5em;height: 2.5em;border-radius: 50%;background: linear-gradient(to bottom,#fff 50%,#f5f7f9);box-shadow: 0 0 7px rgba(61,61,61,0.22);}
.block-index-04 .container .swiper-button-next {right: 0.2em;}
.block-index-04 .container .swiper-button-prev {left: 0.2em;}
.block-index-04 .container .swiper-button-next::after,
.block-index-04 .container .swiper-button-prev::after {color: #93867e;font-size: 81.25%;font-weight: bold;}
.block-index-04 .btn-style-04 {text-align: right;width: 90%;max-width: calc(1100px + 4em);margin: 0 auto;padding: 0 2em;box-sizing: border-box;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1450px) {
  .ttl-style-01 {font-size: 175%;}
  .nav-style-01 {max-width: 51em;}
}
@media only screen and (max-width: 1450px) {
  .block-index-03 .support-01 .container {margin-top: -1.5em;}
  .block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) p:nth-of-type(2) strong {font-size: 115%;}
}
@media only screen and (max-width: 1300px) {
  .ttl-style-01::before {white-space: pre;}
  .block-index-03 .container .voice div p:nth-child(2) br:not(:last-child) {display: none !important;}
  .block-index-03 .support-01 .container {margin-top: 1.5em;}
  .block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr th,
  .block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr td {font-size: 75%;}
  .block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr td {padding: 1em 1.5em;}
  .block-index-03 .container .voice div p:nth-child(1) {width: 28%;padding: 0;}
  .block-index-03 .container .voice div p:nth-child(2) {font-size: 81.25%;width: 71%;padding: 0 0 0 1.5em;}
  .block-index-03 .container .list-02 ul {margin: 1em -0.75em 0;}
  .block-index-03 .container .list-02 ul li {width: calc(33.33% - 1.5em);margin: 0 0.75em;padding-bottom: 2em;}
  .block-index-03 .container .list-02 ul li p {font-size: 87.5%;padding: 0.5em 0;}
  .block-index-03 .container .list-02 ul li p small {font-size: 80%;letter-spacing: 0;}
  .block-index-03 .container .voice {margin-top: 2em;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (max-width: 1024px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  .ttl-style-04 strong {font-size: 80%;}
  .bnr-container-01 {width: 90%;margin: 3em auto 0;}
  .block-index-01 figure {height: 16em;}
  .block-index-01 figure img {height: 100%;object-fit: cover;}  
  .block-index-02 {padding: 2em 0 3em;}
  .block-index-02 .container {margin-top: 2em;}
  .block-index-02 .container div {width: 100%;}
  .block-index-02 .container figure {width: 100%;margin-top: 1.5em;border-radius: 0.3em;}
  .block-index-03 .container {padding: 3em 0;}
  .block-index-03 .container .voice {padding: 0;border-radius: 0.4em;}
  .block-index-03 .container .voice figure {width: 80%;margin: 1.5em auto 2em;}
  .block-index-03 .container .voice div {padding: 4em 0 0;width: 100%;position: relative;}  
  .block-index-03 .container .voice div p:nth-child(1) {font-size: 137.5%;padding: 0;width: 100%;transform: translateY(-2em);}
  .block-index-03 .container .voice div p:nth-child(1) svg {width: 5.5em;top: 47%;}
  .block-index-03 .container .voice div p:nth-child(2) {font-size: 100%;width: 100%;padding: 0 2em;}
  .block-index-03 .container .voice div p:nth-child(2)::before {display: none;}
  .block-index-03 .container .head {flex-direction: column-reverse; }
  .block-index-03 .container .head div:nth-child(1) {width: 100%;margin-top: 1.5em;}
  .block-index-03 .container .head div:nth-child(2) {width: 100%;}
  .block-index-03 .container .list-01 {margin-top: 2em;}
  .block-index-03 .container .list-01 > ul {width: 100%;overflow: hidden;}
  .block-index-03 .container .list-01 > ul > li div:nth-child(1) {width: 100%;}
  .block-index-03 .container .list-01 > ul > li div:nth-child(2) {width: 100%;margin-top: 1.5em;}
  .block-index-03 .container .list-01 > ul > li div:nth-child(1) p:not(.note) {font-size: 100%;margin-top: 1.5em;}
  .block-index-03 .container .list-02 {margin-top: 2em;}
  .block-index-03 .container .list-02 ul {margin: 0;}
  .block-index-03 .container .list-02 ul li {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;width: 100%;padding: 0.5em;margin-left: 0;margin-right: 0;box-sizing: border-box;background: #2483b7;}
  .block-index-03 .container .list-02 ul li + li {margin-top: 10px;}
  .block-index-03 .container .list-02 ul li figure {width: 32%;height: 6em;background: #fff;border-radius: 0.3em;overflow: hidden;}
  .block-index-03 .container .list-02 ul li figure img {width: 100%;height: 100%;object-fit: cover;}
  .block-index-03 .container .list-02 ul li p {font-size: 100%;text-align: left;width: 64%;position: static;}
  .block-index-03 .support-01 .container {margin-top: 0;}
  .block-index-03 .support-01 .container > div ul li {width: 48%;}
  .block-index-03 .support-02 .container .list-01 > ul > li div:nth-child(2) > p:nth-of-type(1) {font-size: 100%;}
  .block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr th,
  .block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr td {font-size: 87.5%;}
  .block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) table tr:nth-child(1) th {}
  .block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) p:nth-of-type(2) {font-size: 100%;}
  .block-index-03 .support-02 .container .list-01 > ul > li:nth-child(1) > div:nth-child(2) p:nth-of-type(2) strong {font-size: 125%;}
  .block-index-03 .support-03 .container .head {flex-direction: column-reverse;}
  .block-index-03 .support-03 .container .list-02 ul li:nth-child(3) figure img {transform: translateY(0.5em);}
  .block-index-03 .support-04 .container .head div:nth-child(1) p {font-size: 100%;}
  .block-index-04 {padding: 3em 0;}
  .block-index-04 .container .swiper-voice {padding-top: 1em;}
  .block-index-04 .btn-style-04 {padding: 0;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}