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

/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
.block-common-mv p {padding-bottom: 1.25em;}
.block-index-02 {padding: 2em 0 5em;position: relative;z-index: 4;}
.block-index-02 .ttl-style-01 small {display: block;letter-spacing: 0.05em;font-size: 33.33%;}
.block-index-02 .ttl-style-01 + p {font-size: 100%;}

.block-index-03 {background: #d7e4ee url("../img/bg_01.webp") no-repeat 50% 100% / cover;background-blend-mode: screen;}
.block-index-03 h3 {padding: 2.5em 0 1em;text-align: center;letter-spacing: 0.2em;font-weight: 700;color: var(--codate-color);}
.block-index-03 h3 span {display: block;margin-bottom: 1.5em;background: var(--grad-03);-webkit-background-clip: text;-webkit-text-fill-color: transparent;opacity: 0.75;}
.block-index-03 figure {display: flex;justify-content: center;align-items: flex-end;gap: 2em;margin: 0.5em 0 3em;}
.block-index-03 figure img:nth-child(1) {width: auto;height: 6em;}
.block-index-03 figure img:nth-child(2) {width: auto;height: 2em;}
.block-index-03 figure img:nth-child(3) {width: auto;height: 5em;}
.block-index-03 figure + p {margin-bottom: 2em;text-align: center;font-weight: bold;line-height: 2;}
.block-index-03 figure + p strong {color: steelblue;}
.block-index-03 .container {max-width: 800px;width: calc(100% - 4em);margin: 0 auto;padding-bottom: 6em;}
.block-index-03 .youtube {position: relative;aspect-ratio: 16 / 9;}
.block-index-03 .youtube iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.block-index-04 h3 {padding: 2.5em 0 1em;text-align: center;letter-spacing: 0.2em;font-weight: 700;color: var(--codate-color);}
.block-index-04 h3 span {display: block;margin-bottom: 1.5em;background: var(--grad-03);-webkit-background-clip: text;-webkit-text-fill-color: transparent;opacity: 0.75;}
.block-index-04 .container {max-width: 800px;width: calc(100% - 4em);margin: 0 auto;padding-bottom: 6em;}
.block-index-04 .grid-list {justify-content: space-between;}
.block-index-04 .grid-list > div {position: relative;width: calc(50% - 1em);margin: 0 0 2em;height: 16em;background: #888 none no-repeat 50% 82% / cover;background-blend-mode: multiply;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.block-index-04 .grid-list > div:nth-child(1) {background-image: url("../img/img_01.webp");width: 100%;}
.block-index-04 .grid-list > div:nth-child(2) {background-image: url("../img/img_02.webp");}
.block-index-04 .grid-list > div:nth-child(3) {background-image: url("../img/img_03.webp");}
.block-index-04 .grid-list > div:nth-child(4) {background-image: url("../img/img_04.webp");}
.block-index-04 .grid-list > div:nth-child(5) {background-image: url("../img/img_05.webp");}
.block-index-04 .grid-list > div p {text-align: center;font-weight: bold;font-size: 137.5%;line-height: 1.5;color: #fff;}
.block-index-04 .grid-list > div p strong {font-size: 150%;line-height: 1;}
.block-index-04 .grid-list > div[data-icon]::before {content: attr(data-icon)"";position: absolute;top: 0;left: 0;padding: 1em;background-color: tomato;font-size: 62.5%;font-weight: bold;line-height: 1;color: #fff;}
.block-index-04 .grid-list > div::after {content: "image";position: absolute;bottom: 0;right: 0;padding: 1em;font-size: 62.5%;font-weight: bold;line-height: 1;color: #fff;}

.block-index-05 {background: var(--codate-grad4);}
.block-index-05 h3 {padding: 2.5em 0 1em;text-align: center;letter-spacing: 0.2em;font-weight: 700;color: var(--codate-color);}
.block-index-05 h3 span {display: block;margin-bottom: 1.5em;background: var(--grad-03);-webkit-background-clip: text;-webkit-text-fill-color: transparent;opacity: 0.75;}
.block-index-05 h3 + p {margin-bottom: 2em;text-align: center;font-weight: bold;line-height: 2;}
.block-index-05 .grid-list {background: var(--codate-grad2);border-radius: 0.5em;padding: 1em;}
.block-index-05 .grid-list > div {width: calc(33.33% - 1em);margin: 0.5em;}
.block-index-05 .grid-list > div a {background-color: #fff;padding: 1.5em 0;border-radius: 0.25em;line-height: 1.5;text-align: center;font-weight: bold;color: var(--codate-color2);}
.block-index-05 .grid-list > div a strong {display: block;font-size: 125%;}
.block-index-05 .grid-list > div a small {display: block;margin-top: 1em;font-size: 75%;}
.block-index-05 .container {max-width: 800px;width: calc(100% - 4em);margin: 0 auto;padding-bottom: 6em;}
.block-index-05 .caps {margin-top: 0.5em;font-size: 75%;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (max-width: 1450px) {
  .block-index-02 .ttl-style-01::before {font-size: 225%;}
}
@media only screen and (min-width: 769px) and (max-width: 1300px) {}
@media only screen and (max-width: 1200px) {
}
@media only screen and (min-width: 1025px) {}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (max-width: 1024px) {}
@media only screen and (min-width: 769px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  .block-index-01 figure {height: 16em;}
  .block-index-01 figure img {height: 100%;object-fit: cover;}  
  .block-index-02 {padding: 2em 0 5em;}
  .block-index-02 .ttl-style-01::before {margin-bottom: 0.5em;font-size: 200%;}
  .block-index-03 figure {display: block;}
  .block-index-03 figure img {margin: 1em auto;}
  .block-index-03 .container {padding-bottom: 4em;}
  .block-index-04 .container {padding-bottom: 4em;}
  .block-index-04 .grid-list > div {border-radius: 0.5em;margin-bottom: 1em;overflow: hidden;width: 100%;height: 8em;}
  .block-index-05 .grid-list > div {width: calc(50% - 1em);}
  .block-index-05 .grid-list > div a {padding: 1.5em 0 0.5em;}
  .block-index-05 .container {padding-bottom: 4em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}