@charset "UTF-8";
/* ===== Reset ===== */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@1,600&family=Montserrat:wght@700&family=Noto+Sans+JP:wght@400;700;900&display=swap');
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #fff;
    color: #000;
    text-align: left;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: "palt";
}

main, article, aside, dialog, figure, header, footer, hgroup, nav, section {
    display: block;
}

img {
    border: 0;
    max-width: 100%;
    height: auto;
    line-height: 0;
    vertical-align: bottom;
    -ms-interpolation-mode: bicubic;
    box-sizing: content-box;
}

svg {
    max-width: 100%;
    height: auto;
    box-sizing: content-box;
}

ul, ol {
    list-style-type: none;
    list-style-position: outside;
}

/* ===== Setting ===== */
html {
    font-size: 62.5%;
}

body {
    background: #042970;
    font-size: 1.6rem;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", Meiryo, "メイリオ", sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

@media only screen and (max-width: 767px) {
    html {
        font-size: 2.667vw;
    }
    img {
        width: auto;
    }
}

@media print, screen and (min-width: 768px) {
  a, a::before, a::after, a *::before, a *::after, button, button::before, button::after, button *::before, button *::after, input[type=submit] {
    transition: background-image 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1920px) {
    html {
        font-size: 0.520vw;
    }
}

/**************************************************
		Layout
**************************************************/
/* ===== Main ===== */
/* .l-grid06 */

/* ===== mv ===== */
.l-mv {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ===== footer ===== */
.l-footer_container {
    color: #000;
}

.l-footer_copyright {
    font-size: 1rem;
    text-align: center;
    margin-top: 3rem;
}
@media print, screen and (min-width: 768px) {
    .l-footer_copyright {
        font-size: 1.3rem;
        margin-top: 7rem;
    }
}


/**************************************************
		Object
**************************************************/
/* ===== section ===== */
.m-sec01 {
    position: relative;
}

.m-sec01_container {
    position: relative;
    margin: 0 auto;
    padding: 0 2rem;
    max-width: 110rem;
}
@media print, screen and (min-width: 768px) {
    .m-sec01_container {
        margin: 0 auto;
        max-width: 135rem;
    }
    .is-narrow .m-sec01_container {
        max-width: 124rem;
    }
    .is-wide .m-sec01_container {
        max-width: 150rem;
    }
    .is-max .m-sec01_container {
        max-width: 184rem;
    }
    .is-min .m-sec01_container {
        max-width: 104rem;
    }
    .is-full .m-sec01_container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }
}

.m-sec02 {
    position: relative;
    padding: 3rem 0;
}
@media print, screen and (min-width: 768px) {
    .m-sec02 {
        padding: 7rem 0;
    }
}
/* .m-sec02:last-child {
    margin-bottom: 0;
} */

.m-sec03{
    position: relative;
    margin-bottom: 5rem;
}

.m-sec03_container{
    position: relative;
    padding: 3rem 2rem;
}
@media print, screen and (min-width: 768px) {
    .m-sec03_container{
        max-width: 164rem;
        margin: 0 auto;
        padding: 5rem 2rem;
    }
}

.m-sec03_box{
}
@media print, screen and (min-width: 768px) {
    .m-sec03_box{
        display: flex;
    }
}

.m-sec03_box_inner01{
}
@media print, screen and (min-width: 768px) {
    .m-sec03_box_inner01{
        margin-right: 5rem;
        width: calc(550 / 1600 * 100%);
    }
}
@media print, screen and (max-width: 767px) {
    .m-sec03_box_inner01{
        margin-bottom: 3.5rem;
    }
}

.m-sec03_box_inner02{
    flex: 1;
}


/* ===== Title ===== */
.m-ttl01 {
    margin-bottom: 2.5rem;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}
@media only screen and (min-width: 768px) {
    .m-ttl01 {
        font-size: 3.3rem;
    }
}

.m-ttl01.is-xs {
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
    .m-ttl01.is-xs {
        font-size: 1.6rem;
    }
}

.m-ttl01.is-sm {
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}
@media only screen and (min-width: 768px) {
    .m-ttl01.is-sm {
        font-size: 2.6rem;
    }
}

.m-ttl01.is-lg {
    font-size: 2rem;
}
@media only screen and (min-width: 768px) {
    .m-ttl01.is-lg {
        font-size: 3.5rem;
    }
}

.m-ttl01.is-xl {
    font-size: 2rem;
}
@media only screen and (min-width: 768px) {
    .m-ttl01.is-xl {
        font-size: 4rem;
    }
}

.m-ttl01.is-xxl {
    font-size: 4.5rem;
}

.m-ttl01.is-center {
    text-align: center;
}

.m-ttl01 .m-iconFonts.is-top {
    padding-top: 7rem;
}

.m-ttl01 .m-iconFonts.is-top::before {
    font-size: 6.5rem;
}

.m-ttl02 {
    padding: 3rem 0;
    background: #042970;
}
@media print, screen and (min-width: 768px) {
    .m-ttl02 {
        padding: 6.5rem 0;
    }
}

.m-ttl02 img {
    max-height: 2.5rem;
    display: block;
    margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
    .m-ttl02 img {
        max-height: 3.5rem;
    }
}

.m-ttl_wrap {
    display: block;
    text-align: center;
    margin-bottom: 7rem;
}

/* ===== Text ===== */
.m-txt01 {
    font-size: 1.8rem;
    line-height: 1.8;
}

.m-txt01.is-xxs {
    font-size: 1.4rem;
}

.m-txt01.is-xs {
    font-size: 1.6rem;
}

.m-txt01.is-sm {
    font-size: 1.8rem;
}

.m-txt01.is-lg {
    font-size: 2rem;
}

.m-txt01.is-xl {
    font-size: 3rem;
}

.m-txt01.is-xxl {
    font-size: 4rem;
}

@media only screen and (min-width: 768px) {
    .m-txt01 {
        font-size: 3rem;
        line-height: 2;
    }

    .m-txt01.is-xxs {
        font-size: 1.8rem;
    }

    .m-txt01.is-xs {
        font-size: 2rem;
    }

    .m-txt01.is-sm {
        font-size: 2.6rem;
    }

    .m-txt01.is-lg {
        font-size: 3rem;
    }

    .m-txt01.is-xl {
        font-size: 4rem;
    }

    .m-txt01.is-xxl {
        font-size: 5rem;
    }
}

.m-txt01.is-center {
    text-align: center;
}

.m-listNotes > li::before {
    content: "※";
    display: inline-block;
    margin-left: -1.2em;
}

.m-listNotes {
    font-size: 1.6rem;
    text-align: center;
}
.m-listNotes:not(:first-child) {
    margin-top: 1rem;
}

@media only screen and (min-width: 768px) {
    .m-txt02 {
        font-size: 1.6rem;
        line-height: 1.8;
    }

    .m-txt02.is-xxs {
        font-size: 1rem;
    }

    .m-txt02.is-xs {
        font-size: 1.2rem;
    }

    .m-txt02.is-sm {
        font-size: 1.4rem;
    }

    .m-txt02.is-lg {
        font-size: 1.8rem;
    }

    .m-txt02.is-xl {
        font-size: 2rem;
    }

    .m-txt02.is-xxl {
        font-size: 2.2rem;
    }
}

.m-txt02.is-center {
    text-align: center;
}

/* ===== Button ===== */
.m-btn01 {
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 1.5;
    background: #e50012;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    transition: opacity 0.3s;
    /* transition: background-color 0.1s, border-color 0.1s, color 0.1s, opacity 0.1s; */
}
@media only screen and (min-width: 768px) {
    .m-btn01 {
        font-size: 2.6rem;
    }
}

.m-btn01 li::before {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    right: 99.8%;
    content: '';
    border: 2.35rem solid transparent;
    border-right: 2rem solid #e50012;
    margin: auto;
}
@media only screen and (min-width: 768px) {
    .m-btn01 li::before {
        border: 3.9rem solid transparent;
        border-right: 4rem solid #e50012;
    }
}

.m-btn01 li::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 99.8%;
    content: '';
    border:2.35rem solid transparent;
    border-left: 2rem solid #e50012;
    margin: auto;
}
@media only screen and (min-width: 768px) {
    .m-btn01 li::after {
        border: 3.9rem solid transparent;
        border-left: 4rem solid #e50012;
    }
}

.m-btn01 li a {
    padding: 1rem;
    display: block;
}
@media only screen and (min-width: 768px) {
    .m-btn01 li a {
        padding: 2rem;
    }
}

.m-btn01 .m-btn_arrow {
    display: flex;
    position: relative;
    padding-left: 2.5rem;
}
@media only screen and (min-width: 768px) {
    .m-btn01 .m-btn_arrow {
        padding-left: 4.5rem;
    }
}

.m-btn01 .m-btn_arrow::before {
    content: url("../img/icon_arrow02.svg");
    width: 2rem;
    display: block;
    position: absolute;
    transform: translate(0%, -50%);
    top: 50%;
    left: 0;
    margin-top: 0.5rem;
}
@media only screen and (min-width: 768px) {
    .m-btn01 .m-btn_arrow::before {
        width: 3.5rem;
    }
}

/* @media only screen and (min-width: 768px) {
    .m-btn01:hover {
        opacity: 0.7;
    }
} */

/* ===== new line ===== */
.m-spBr {
    display: block;
}

.m-pcBr {
    display: none;
}

@media print, screen and (min-width: 768px) {
    .m-spBr {
        display: none;
    }

    .m-pcBr {
        display: block;
    }
}

/* ===== copyright ===== */
.m-copyright {
    color: #fff;
    font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
    .m-copyright {
        font-size: 1.6rem;
    }
}

/**************************************************
        Theme
**************************************************/
.theme-background01 {
    background: url("../img/bg_pattern01.svg") repeat-y;
}

.theme-background02 {
    background: url("../img/bg_pattern02.svg") repeat-y;
}

.theme-border01 {
    border-top: 5px solid #b08417;
}

/**************************************************
		index
**************************************************/
/* mv */
.mv_wrap {
    width: 100%;
}

.mv_ttl {
    padding: 3rem 2rem;
    background: #042970;
    text-align: center;
    display: block;
    border-top: 2px solid #b08417;
    margin-top: 2rem;
}
@media print, screen and (min-width: 768px) {
    .mv_ttl {
        padding: 7rem 2rem;
        border-top: 5px solid #b08417;
        margin-top: 4rem;
    }
}

.mv_ttl img {
    max-width: 71.5rem;
    /* width: calc(100% * 715 / 1920); */
    display: block;
    margin: auto;
}

.mv_container {
    /* width: calc(100% - 3rem); */
    width: 100%;
    /* max-width: 192rem; */
    margin: 0 auto;
    background: #042970;
}

.mv_img img {
    width: 100vw;
}

/* movie */
.movie_container {
    text-align: center;
    width: 100%;
}

.movie_box {
    /* padding: 7rem 0; */
}

.movie_box img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    margin: 1rem 0;
}
@media print, screen and (min-width: 768px) {
    .movie_box img {
        margin: 3rem 0;
    }
}

/* about */
.about_container {
    position: relative;
}

.about_item {
    border: 5px solid #042970;
    padding: 2rem;
    text-align: center;
    font-size: 1.8rem;
    color: #042970;
    font-weight: 700;
    margin: 1rem 2rem;
}
@media print, screen and (min-width: 768px) {
    .about_item {
        border: 10px solid #042970;
        font-size: 2.4rem;
        padding: 7rem;
        margin: 5rem 15rem;
    }
}

.about_item img {
    max-width: 66.6rem;
    margin: 2rem 0 1rem;
}
@media print, screen and (min-width: 768px) {
    .about_item img {
        margin: 3rem 0 2rem;
    }
}

.about_ttl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2rem 0;
}
@media print, screen and (min-width: 768px) {
    .about_ttl {
        margin: 4.8rem 0;
    }
}

.about_ttl h2 {
    position: relative;
    display: inline;
    text-align: center;
    padding: 1.3rem .5rem;
    line-height: 1.5;
    background: #042970;
    color: #fff;
    font-size: 2rem;
}
@media print, screen and (min-width: 768px) {
    .about_ttl h2 {
        padding: 2.6rem 2rem;
        font-size: 3rem;
    }
}

.about_ttl h2::before {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    right: 99.8%;
    content: '';
    border: 2.8rem solid transparent;
    border-right: 2.5rem solid #042970;
    margin: auto;
}
@media print, screen and (min-width: 768px) {
    .about_ttl h2::before {
        border: 4.9rem solid transparent;
        border-right: 3.5rem solid #042970;
    }
}

.about_ttl h2::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 99.8%;
    content: '';
    border: 2.8rem solid transparent;
    border-left: 2.5rem solid #042970;
    margin: auto;
}
@media print, screen and (min-width: 768px) {
    .about_ttl h2::after {
        border: 4.9rem solid transparent;
        border-left: 3.5rem solid #042970;
    }
}

.about_txt p:not(:last-child) {
    margin-bottom: 1rem;
}
@media print, screen and (min-width: 768px) {
    .about_txt p:not(:last-child) {
        margin-bottom: 6rem;
    }
}

.about_img {
    position: absolute;
    bottom: 0;
    left: -12%;
    width: calc(100% * 450 / 1350);
    display: none;
}
@media print, screen and (min-width: 768px) {
    .about_img {
        display: block
    }
}

/* profile */
.profile_background {
    background: url("../img/main_img03_sp.jpg") no-repeat 72% 0;
    background-size: auto 100%;
}
@media print, screen and (min-width: 768px) {
    .profile_background {
        background: url("../img/main_img03_pc.jpg") no-repeat center top;
        background-size: cover;
    }
}

.profile_container {
    position: relative;
    font-weight: 700;
    color: #fff;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
    height: 62rem;
    width: 100%;
}
@media print, screen and (min-width: 768px) {
    .profile_container {
        height: 150rem;
    }
}

.profile_inner {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 70rem;
}

.profile_neme {
    font-size: 4rem;
}
@media print, screen and (min-width: 768px) {
    .profile_neme {
        font-size: 7.5rem;
    }
}

.profile_neme_en {
    color: #b08417;
    margin: 0 0 3rem;
    display: block;
}
@media print, screen and (min-width: 768px) {
    .profile_neme_en {
        margin: 1rem 0 14.7rem;
    }
}

.profile_txt {
    font-weight: 400;
    margin: 1rem 0;
}
@media print, screen and (min-width: 768px) {
    .profile_txt {
        margin: 2rem 0;
    }
}

.profile_txt p:not(:last-child) {
    margin-bottom: 2.5rem;
}
@media print, screen and (min-width: 768px) {
    .profile_txt p:not(:last-child) {
        margin-bottom: 6rem;
    }
}

/* rating */
.rating_background {
    background: url("../img/main_img07.jpg") no-repeat center center;
    background-size: cover;
}

.rating_container {
    background: rgb(4 41 112 / 50%);
    color: #fff;
    text-align: center;
}

.rating_inner {
    position: relative;
}

.rating_ttl {
    font-size: 2rem;
    font-weight: 900;
    padding: 2rem 0;
    text-align: center;
    display: block;
    position: relative;
}
@media print, screen and (min-width: 768px) {
    .rating_ttl {
        font-size: 2.6rem;
        padding: 4rem 0;
    }
}

.rating_ttl::before {
    content: url("../img/bg_pattern03_sp.svg");
    position: absolute;
    bottom: -.66rem;
    left: 0;
    width: 100%;
}
@media print, screen and (min-width: 768px) {
    .rating_ttl::before {
        content: url("../img/bg_pattern03_pc.svg");
        bottom: -7%;
    }
}

.rating_txt {
    background: rgb(153 153 153 / 30%);
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    padding: 2rem;
}
@media print, screen and (min-width: 768px) {
    .rating_txt {
        font-size: 2.6rem;
        padding: 5rem 0;
    }
}


.rating_img01 {
    position: absolute;
    top: -25%;
    left: -7%;
    width: calc(100% * 577 / 1500);
    z-index: 10;
    display: none;
}
@media print, screen and (min-width: 768px) {
    .rating_img01 {
        display: block;
    }
}


.rating_img02 {
    position: absolute;
    top: -58.5rem;
    right: 1%;
    width: calc(100% * 456 / 1500);
    display: none;
}
@media print, screen and (min-width: 768px) {
    .rating_img02 {
        display: block;
    }
}

.rating_radarChart {
    margin: 1rem auto 1rem;
}
@media print, screen and (min-width: 768px) {
    .rating_radarChart {
        margin: 6rem auto 2rem;
    }
}

.radarChart {
    max-width: 45.5rem;
    padding: 2rem;
}

.radarChart_inner {
    padding-bottom: 90%;
    position: relative;
    width: 100%;
    height: 100%;
    background: url("../img/main_img_radarChart01.svg") no-repeat center / contain;
}

.radarChart_box {
    width: 100%;
    height: 100%;
    background: rgb(176 132 23 / 85%);
    position: absolute;
    top: 0;
    left: 0;
}

.hexagon01 {
    clip-path: polygon(47.5% 9%, 66.5% 37.5%, 79% 70%, 47.5% 91%, 28.5% 62%, 28.5% 38%);
}

.hexagon02 {
    clip-path: polygon(48% 25%, 67% 37.5%, 73% 66%, 47.5% 90%, 16.5% 70%, 28.5% 37.5%);
}

.hexagon03 {
    clip-path: polygon(47.5% 9%, 66.5% 37.5%, 73% 66%, 47.5% 91%, 22.5% 66%, 28.5% 38%);
}

.hexagon04 {
    clip-path: polygon(48% 25%, 67% 37.5%, 73% 66%, 47.5% 91%, 22.5% 66%, 16% 29%);
}

.hexagon05 {
    clip-path: polygon(47.5% 18%, 66.5% 37.5%, 73% 66%, 47.5% 91%, 16% 70%, 22.5% 34%);
}

.hexagon06 {
    clip-path: polygon(47.5% 9%, 73% 33.5%, 73% 66%, 47.5% 82.5%, 22.5% 66%, 16.5% 29.5%);
}

.hexagon07 {
    clip-path: polygon(48.5% 25.5%, 73% 33.5%, 66.5% 62%, 47.5% 82%, 22.5% 66%, 16.5% 29.5%);
}

.hexagon08 {
    clip-path: polygon(47.5% 18%, 66.5% 37.5%, 73% 66%, 47.5% 91%, 22.5% 66%, 28.5% 38%);
}

.hexagon09 {
    clip-path: polygon(47.5% 17.5%, 73% 33.5%, 67% 62%, 47.5% 82.5%, 22.5% 66%, 16.5% 29.5%);
}

.hexagon10 {
    clip-path: polygon(47.5% 9.5%, 67% 37.5%, 66.5% 62%, 47.5% 90%, 16.5% 70%, 16.5% 29.5%);
}

.hexagon11 {
    clip-path: polygon(47.5% 9.5%, 79% 29.5%, 67% 61%, 47.5% 82%, 22.5% 66%, 16.5% 29.5%);
}

.hexagon12 {
    clip-path: polygon(47.5% 9%, 79% 29.5%, 73% 66%, 47.5% 91%, 22.5% 66%, 22.5% 33.5%);
}

.radarChart {
    animation: radarChart 3s forwards;
}

/* @keyframes radarChart {
    0% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }

    100% {
        clip-path: polygon(0, 0, 0, 0, 0);
    }
} */

.rating_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1.5rem;
    background: rgb(153 153 153 / 30%);
    position: relative;
}
@media print, screen and (min-width: 768px) {
    .rating_list {
        padding: 3rem 4rem;
    }
}

.rating_list li {
    width: 100%;
    margin: 1rem;
}
@media print, screen and (min-width: 768px) {
    .rating_list li {
        width: calc(100% / 2 - 4rem);
        margin: 2rem;
    }
}

.rating_box01 {
    position: relative;
    display: block;
    width: 100%;
}

.rating_number {
    font-size: 3rem;
    font-family: "Montserrat";
}
@media print, screen and (min-width: 768px) {
    .rating_number {
        font-size: 5rem;
    }
}

.rating_number span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.7rem;
    aspect-ratio: 200 / 173;
    background-color: #fff;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    color: #042970;
    position: absolute;
    top: 0;
    left: 0rem;
    z-index: 10;
}
@media print, screen and (min-width: 768px) {
    .rating_number span {
        width: 9rem;
    }
}

.rating_head {
    padding: 1rem 2rem;
    background: #042970;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 2rem;
    font-weight: 900;
    margin-left: 4.3rem;
}
@media print, screen and (min-width: 768px) {
    .rating_head {
        padding: 1rem 5rem;
        font-size: 4rem;
        margin-left: 6.5rem;
    }
}

.rating_head span {
    font-size: 1.6rem;
    color: #b08417;
}
@media print, screen and (min-width: 768px) {
    .rating_head span {
        font-size: 2rem;
    }
}

.rating_box02 {
    display: flex;
    font-size: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid #fff;
    margin-top: 1.3rem;
    text-align: left;
}
@media print, screen and (min-width: 768px) {
    .rating_box02 {
        font-size: 2rem;
        padding-top: 3rem;
        margin-top: 3rem;
    }
}

.rating_box02 img {
    width: 6rem;
    margin-right: 1rem;
}
@media print, screen and (min-width: 768px) {
    .rating_box02 img {
        width: 6rem;
        margin-right: 3rem;
    }
}

.rating_box02 span {
    color: #ffcc66;
    font-size: 1.3rem;
}

/* pickup */
.pickup_background {
    background: url("../img/main_img05_sp.jpg") no-repeat center center;
    background-size: cover;
}
@media print, screen and (min-width: 768px) {
    .pickup_background {
        background: url("../img/main_img05_pc.jpg") no-repeat center center;
        background-size: cover;
    }
}

.pickup_container {
    height: 58rem;
    position: relative;
}
@media print, screen and (min-width: 768px) {
    .pickup_container {
        height: 108rem;
    }
}

.pickup_list {
    display: flex;
    width: 100%;
    align-items: center;
    position: absolute;
    bottom: 0;
    top: 3rem;
    right: 0;
    flex-direction: column;
}
@media print, screen and (min-width: 768px) {
    .pickup_list {
        align-items: flex-end;
        top: auto;
        bottom: 6rem;
    }
}

/* .pickup_list > li {
    width: 100%;
    margin: 1rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {
    .pickup_list > li {
        width: calc(100% / 2 - 4rem);
        margin: 4rem;
    }
} */

.pickup_ttl {
    text-align: center;
}

.pickup_ttl h2 {
    font-size: 3rem;
    color: #fff;
    font-weight: 900;
    margin: 1.5rem 0;
    text-align: left;
    line-height: 1;
    position: relative;
    padding-left: 8rem;
}
@media print, screen and (min-width: 768px) {
    .pickup_ttl h2 {
        font-size: 6rem;
        margin: 4rem 4rem 3rem;
        padding-left: 15rem;
    }
}

.pickup_ttl h2::before {
    content: url("../img/txt_formation01.svg");
    color: #fff;
    width: 7rem;
    display: inline-block;
    background: #C80000;
    padding: 0 1rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    padding-bottom: .5rem;
}
@media print, screen and (min-width: 768px) {
    .pickup_ttl h2::before {
        width: 12rem;
        padding: 0 2rem;
        padding-bottom: 1.5rem;
    }
}

.pickup_subttl {
    padding: .5rem 0;
    border-top: #ffcc66 2px solid;
    border-bottom: #ffcc66 2px solid;
    color: #ffcc66;
    font-size: 2.3rem;
    text-align: center;
    font-family: "Montserrat";
    display: block;
    margin: 1.5rem 0;
}
@media print, screen and (min-width: 768px) {
    .pickup_subttl {
        padding: 1rem 0;
        margin: 3rem 0;
        font-size: 4.8rem;
    }
}

.pickup_list img {
    filter: drop-shadow(3px 3px 7px rgba(0, 0, 0, 0.8));
}

.pickup_btn {
    margin: 1rem 0;
}
@media print, screen and (min-width: 768px) {
    .pickup_btn {
        margin: 3rem 0;
    }
}

/* squadList */
.swiper_squadList .swiper-wrapper {
    transition-timing-function: linear;
}

.squadList_container img {
    transition: 0.3s;
}

.squadList_container img:hover {
    /* opacity: 0.7; */
    cursor: pointer;
}

.m-sec01_container.squadList {
    padding: 0;
}

/* formation */
.formation_deco {
    margin-top: -2rem;
    z-index: 10;
    position: relative;
    display: block;
}
@media print, screen and (min-width: 768px) {
    .formation_deco {
        margin-top: -4rem;
    }
}

.formation_background {
    background: url("../img/main_img10.svg") no-repeat;
    background-size: cover;
    padding-top: 4%;
    margin-top: -4%;
    position: relative;
}

/* .formation_background {
    position: relative;
    width: 100%;
    margin: 50px auto;
    background-color: #fff;
}

.formation_background::after {
    content: "";
    position: absolute;
    background-image: linear-gradient(90deg, rgb(11 134 65 / 85%) 50%, transparent 50%), linear-gradient(rgb(11 134 65 / 50%) 50%, transparent 50%);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: 70rem 70rem;
} */

.formation_inner {
    /* max-width: 150rem; */
    margin: 0 auto;
    padding: 5% 6%;
    /* height: 247.5rem; */
    /* padding-top: calc(1506 / 2475 * 100%); */
}
@media print, screen and (min-width: 768px) {
    .formation_inner {
        padding: 5% 11%;
    }
}

.formation_list {
    height: 100%;
}

.formation_list li {
    position: absolute;
    width: 16%;
    filter: drop-shadow(3px 3px 7px rgba(0, 0, 0, 0.8));
}
@media print, screen and (min-width: 768px) {
    .formation_list li {
        width: 13%;
    }
}

.formation_list li:hover {
    transform: scale(1.1, 1.1);
    transition: .3s all;
    cursor: pointer;
}

.formation_cards11 {
    top: 8%;
    left: 3%;
}
@media print, screen and (min-width: 768px) {
    .formation_cards11 {
        top: 12%;
        left: 7%;
    }
}

.formation_cards10 {
    top: 6%;
    left: 42%;
    /* transform: translate(-50%, 0%); */
}
@media print, screen and (min-width: 768px) {
    .formation_cards10 {
        top: 10%;
        left: 43.5%;
    }
}

.formation_cards09 {
    top: 8%;
    right: 3%;
}
@media print, screen and (min-width: 768px) {
    .formation_cards09 {
        top: 12%;
        right: 7%;
    }
}

.formation_cards08 {
    top: 24%;
    right: 25%;
}

.formation_cards07 {
    top: 24%;
    left: 25%;
}

.formation_cards06 {
    top: 40%;
    left: 42%;
    /* transform: translate(-50%, -50%); */
}
@media print, screen and (min-width: 768px) {
    .formation_cards06 {
        top: 43%;
        left: 43.5%;
    }
}

.formation_cards05 {
    bottom: 23%;
    left: 31%;
}
@media print, screen and (min-width: 768px) {
    .formation_cards05 {
        left: 33%;
    }
}

.formation_cards04 {
    bottom: 29%;
    left: 10%;
}
@media print, screen and (min-width: 768px) {
    .formation_cards04 {
        bottom: 31%;
        left: 14%;
    }
}


.formation_cards03 {
    bottom: 29%;
    right: 10%;
}
@media print, screen and (min-width: 768px) {
    .formation_cards03 {
        bottom: 31%;
        right: 14%;
    }
}

.formation_cards02 {
    bottom: 23%;
    left: 54%;
}
@media print, screen and (min-width: 768px) {
    .formation_cards02 {
        left: 57%;
    }
}

.formation_cards01 {
    bottom: 5%;
    left: 42%;
    /* transform: translate(-50%, 0%); */
}
@media print, screen and (min-width: 768px) {
    .formation_cards01 {
        bottom: 5%;
        left: 43%;
    }
}

.formation_tag {
    width: 50%;
    display: block;
    margin: 0 auto 10%;
}

.formation_img {
    position: absolute;
    bottom: 0;
    right: 3%;
    width: calc(100% * 540 / 1920);
}

/* used */
.used_lead {
    margin-top: 5rem;
    color: #fff;
}

.used_list {
    display: flex;
    flex-wrap: wrap;
}

.used_list li {
    width: 100%;
    margin: 1rem 0;
    background: rgb(4 41 112 / 50%);
    align-items: stretch;
    display: flex;
    flex-direction: column;
}
@media print, screen and (min-width: 768px) {
    .used_list li {
        width: calc(100% / 2 - 4rem);
        margin: 2rem;
    }
}

.used_box01 {
    display: flex;
    align-items: center;
    margin: 1rem;
}
@media print, screen and (min-width: 768px) {
    .used_box01 {
        margin: 2rem;
    }
}

.used_box01 p {
    text-align: left;
}

.used_box02 {
    background: rgb(35 24 21 / 30%);
    color: #fff;
    height: 100%;
}

.used_box02_inner {
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
    height: 100%;
}
@media print, screen and (min-width: 768px) {
    .used_box02_inner {
        width: 50rem;
        margin: 0 auto;
        padding: 5rem 2rem;
        height: 100%;
    }
}

.used_ttl {
    display: inline-block;
    color: #fff;
    margin: 0;
}

.used_number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    aspect-ratio: 200 / 173;
    background-color: #fff;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    color: #042970;
    margin-right: 1rem;
    font-family: "Montserrat";
    font-size: 2.3rem;
}
@media print, screen and (min-width: 768px) {
    .used_number {
        width: 6rem;
        font-size: 3rem;
    }
}

.used_img {
    position: relative;
    margin-bottom: 1rem;
}

.used_tag {
    padding: 1rem;
    background: #f29600;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    font-weight: 700;
    font-size: 1.4rem;
}
@media print, screen and (min-width: 768px) {
    .used_tag {
        font-size: 1.6rem;
    }
}

.used_tag::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    border: 2rem solid transparent;
    border-left: 2.1rem solid #f29600;
    margin: auto;
}
@media print, screen and (min-width: 768px) {
    .used_tag::after {
        border: 2.3rem solid transparent;
        border-left: 2.1rem solid #f29600;
    }
}

/* footer */
.footer_box01 {
    padding: 2rem 0;
    background: #042970;
    text-align: center;
}
@media print, screen and (min-width: 768px) {
    .footer_box01 {
        padding: 4rem 0;
    }
}

.footer_box01 img {
    max-width: 5rem;
}
@media print, screen and (min-width: 768px) {
    .footer_box01 img {
        max-width: 10rem;
    }
}

.footer_box02 {
    background: #fff;
    text-align: center;
    padding: 2rem 1rem;
}
@media print, screen and (min-width: 768px) {
    .footer_box02 {
        padding: 5rem 1rem;
    }
}

.footer_box02 img {
    max-width: 50rem;
}

/* modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    pointer-events: none;
    opacity: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    inset: 0;
}
@media print, screen and (min-width: 768px) {
    .modal {
        height: 100vh;
        padding: 3rem;
    }
}

/* モーダルがactiveの時 */
.modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
.modal_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* モーダルのコンテンツ */
.modal_content {
    position: relative;
    background: url("../img/bg_pattern01.svg") repeat-y;
    /* width: 100%; */
    width: 130rem;
    overflow: hidden;
    height: 95vh;
}

.modal_outer {
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
}

.modal_outer::-webkit-scrollbar {
    width: .4rem;
}
@media print, screen and (min-width: 768px) {
    .modal_outer::-webkit-scrollbar {
        width: 1rem;
    }
}

.modal_outer::-webkit-scrollbar-track {
    background-color: rgba(4, 42, 112, 0.489);
}

.modal_outer::-webkit-scrollbar-thumb {
    background-color: #fff;
}

/* モーダルを閉じるボタン */
.modal_close-btn {
    position: absolute;
    right: 1rem;
    top: 0;
    width: 3rem;
    height: 3rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    color: #fff;
    font-size: 3.5rem;
}
@media print, screen and (min-width: 768px) {
    .modal_close-btn {
        width: 6rem;
        height: 6rem;
        font-size: 5rem;
    }
}

.star10_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #b1831737;
}

.star10_rating:before,
.star10_rating:after{
    content: '★★★★★★★★★★';
}

.star10_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #b18417;
}

.star10_rating[data-rate="10"]:after{ width: 100%; } /* 星10 */
.star10_rating[data-rate="9"]:after{ width: 90%; } /* 星9 */
.star10_rating[data-rate="8"]:after{ width: 80%; } /* 星8 */
.star10_rating[data-rate="7"]:after{ width: 70%; } /* 星7 */
.star10_rating[data-rate="6"]:after{ width: 60%; } /* 星6 */
.star10_rating[data-rate="5"]:after{ width: 50%; } /* 星5 */
.star10_rating[data-rate="4"]:after{ width: 40%; } /* 星4 */
.star10_rating[data-rate="3"]:after{ width: 30%; } /* 星3 */
.star10_rating[data-rate="2"]:after{ width: 20%; } /* 星2 */
.star10_rating[data-rate="1"]:after{ width: 10%; } /* 星1 */

.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #b1831737;
}

.star5_rating:before,
.star5_rating:after{
    content: '★★★★★';
}

.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #b18417;
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */

.modal_container {
    border: 1px solid #fff;
    margin: 1rem 1rem 2rem;
    background: rgba(35, 24, 21, 0.5);
    position: relative;
}
@media print, screen and (min-width: 768px) {
    .modal_container {
        margin: 5rem 8rem;
    }
}

.modal_container .m-btn01 {
    position: absolute;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal_inner {
    display: flex;
    flex-direction: column;
    /* grid-template-columns: minmax(2rem, auto) 1fr 1fr; */
    /* grid-template-rows: max-content max-content 1fr auto; */
    margin: 1.5rem 1.5rem 0;
    grid-auto-columns: 100%;
}
@media print, screen and (min-width: 768px) {
    .modal_inner {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 5rem;
        margin: 4rem 4rem 0;
    }
}

.modal_box01 {
    grid-area: 1 / 1 / 3 / 3;
    width: 80%;
    margin: auto;
}
@media print, screen and (min-width: 768px) {
    .modal_box01 {
        width: 40rem;
    }
}

.modal_box02 {
    grid-area: 3 / 1 / 4 / 3;
    color: #fff;
    line-height: 2;
    margin-bottom: 0;
}
@media print, screen and (min-width: 768px) {
    .modal_box02 {
        margin-bottom: 3rem;
    }
}

.modal_box02 span {
    padding: .5rem;
    border-bottom: 1px solid #fff;
    display: block;
    text-align: left;
}

.modal_box03 {
    grid-area: 1 / 3 / 3 / 6;
    text-align: center;
    font-family: "Montserrat";
    /* width: 55rem; */
    margin-top: 2rem;
}
@media print, screen and (min-width: 768px) {
    .modal_box03 {
        margin-top: 0;
    }
}

.modal_box04 {
    color: #fff;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
@media print, screen and (min-width: 768px) {
    .modal_box04 {
        grid-area: 1 / 6 / 3 / 7;
        display: grid;
        margin-top: 0;
    }
}

.modal_box05 {
    grid-area: 3 / 3 / 4 / 7;
    display: flex;
    align-items: center;
    padding-bottom: 3rem;
}
@media print, screen and (min-width: 768px) {
    .modal_box05 {
        padding-bottom: 0;
    }
}


@media print, screen and (max-width: 768px) {
    /* .modal_box01,.modal_box02,.modal_box03,.modal_box04.modal_box05 {
        width: auto;
        grid-area: 1;
    } */
}

.modal_ttl {
    padding: 1.5rem 0;
    background: #042970;
    text-align: center;
}
@media print, screen and (min-width: 768px) {
    .modal_ttl {
        padding: 4rem 0;
    }
}

.modal_ttl img {
    max-height: 1.5rem;
    display: block;
    margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
    .modal_ttl img {
        max-height: 2.5rem;
    }
}

.modal_lead01 {
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #e50012;
    border-bottom: 1px solid #fff;
    margin: 0;
    padding-left: 7rem;
    text-align: left;
}
@media print, screen and (min-width: 768px) {
    .modal_lead01 {
        padding-left: 13rem;
    }
}

.modal_lead01[data-position="mf"] {
    background: #009844;
}

.modal_lead01[data-position="df"] {
    background: #036eb7;
}

.modal_lead01[data-position="gk"] {
    background: #f29600;
}

.modal_lead01::before {
    content: url("../img/txt_formation01.svg");
    background: #cc0000;
    display: block;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5rem;
    padding: 0 1rem;
    margin-left: 1rem;
}
@media print, screen and (min-width: 768px) {
    .modal_lead01::before {
        width: 10rem;
        padding: 0 1.3rem;
        margin-left: 2rem;
    }
}

.modal_lead01[data-position="mf"]::before {
    content: url("../img/txt_formation03.svg");
    background: #006633;
    width: 5rem;
}

.modal_lead01[data-position="df"]::before {
    content: url("../img/txt_formation02.svg");
    background: #006699;
    width: 5rem;
}

.modal_lead01[data-position="gk"]::before {
    content: url("../img/txt_formation04.svg");
    background: #cc6600;
    width: 5rem;
}

@media print, screen and (min-width: 768px) {
    .modal_lead01[data-position="mf"]::before,
    .modal_lead01[data-position="df"]::before,
    .modal_lead01[data-position="gk"]::before {
        width: 9rem;
    }
}

.modal_lead02 {
    text-align: center;
    margin: 1rem 0;
}

.modal_lead02 li {
    position: relative;
    display: inline;
    text-align: center;
    padding: .5rem 4rem;
    line-height: 1.5;
    background: #fff;
    color: #042970;
}

.modal_lead02 li::before {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    right: 100%;
    content: '';
    border: 1.5rem solid transparent;
    border-right: 1.4rem solid #fff;
    margin: auto;
}

.modal_lead02 li::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    border: 1.5rem solid transparent;
    border-left: 1.4rem solid #fff;
    margin: auto;
}

.modal_box03 .star10_rating {
    font-size: 2.8rem;
    text-align: center;
    margin: 1rem 0;
}
@media print, screen and (min-width: 768px) {
    .modal_box03 .star10_rating {
        font-size: 4rem;
    }
}

.modal_box03 img {
    margin: 2rem;
}

.modal_box04_ttl {
    /* font-size: 1.6rem; */
}

.modal_box04_img {
    margin: 1rem 0;
}

.modal_box04_list01 {
    width: 30%;
    margin-right: 2rem;
}
@media print, screen and (min-width: 768px) {
    .modal_box04_list01 {
        width: 100%;
        margin-right: 0;
    }
}

/* .modal_box04_list02 {
    width: 70%;
} */

.modal_box04_list02 li {
    display: flex;
    font-size: 1.4rem;
    margin: .8rem 0;
}

.modal_box04_list02 p {
    width: 4.5rem;
    text-align-last: justify;
}

.modal_box04_list02 p::after {
    content: '|';
    margin: 0 .5rem;
}

.modal_box04_total {
    flex-direction: row;
    align-items: center;
    padding: 0;
}
@media print, screen and (min-width: 768px) {
    .modal_box04_total {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 0;
    }
}

.modal_box04_total .modal_box04_digit {
    font-size: 6rem;
    font-family: "Montserrat";
    line-height: .9;
    padding: .5rem;
}
@media print, screen and (min-width: 768px) {
    .modal_box04_total .modal_box04_digit {
        font-size: 10rem;
        padding: 0;
    }
}

.modal_box05_img {
    width: 55rem;
    /* margin: 1rem; */
}

.modal_box05_txt {
    color: #ffcc66;
    /* font-weight: 700; */
    margin: 1rem;
}

.modal_box05_txt img {
    margin: 1rem 0;
    display: none;
}
@media print, screen and (min-width: 768px) {
    .modal_box05_txt img {
        display: block;
    }
}

.swiperThumbnail {
    margin: 3rem 2rem 3rem;
}
@media print, screen and (min-width: 768px) {
    .swiperThumbnail {
        margin: 3rem 8rem 5rem;
    }
}

.swiperThumbnail li {
    opacity: .5;
}

.swiperThumbnail li:hover {
    transform: scale(1.1, 1.1);
    transition: .3s all;
    opacity: 1;
}

.swiperThumbnail .swiper-slide-thumb-active {
    transform: scale(1.1, 1.1);
    opacity: 1;
}

.swiper:hover .slide:not(:hover) {
    opacity: .5;
    transition: .3s all;
}

/* swiper */
.swiper-button-prev,
.swiper-button-next {
    height: 3rem;
    width: 3rem;
    margin: 0;
}
@media print, screen and (min-width: 768px) {
    .swiper-button-prev,
    .swiper-button-next {
        height: 5rem;
        width: 5rem;
        margin: 0 1rem;
    }
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
    height: 5rem;
    width: 5rem;
    margin: auto;
}

.swiper-button-prev::after {
    background: url("../img/icon_arrow01.svg");
}

.swiper-button-next::after {
    background: url("../img/icon_arrow02.svg");
}

/* 動き */
/* .fadeIn01 {
    animation: fadeIn .55s ease-in-out forwards;
    animation: fadeIn .55s ease-in-out forwards;
    transform: translateY(100%);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }
    25% {
        opacity: 0
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
} */

.fadeIn01 {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity .3s, transform .3s;
}

.fadeIn01.isShow {
    opacity: 1;
    transform: translateY(0);
}