@charset "UTF-8";

html {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    font-size: .705vw;
    height: 100%;
}

body {
    color: #000;
    background: #fff;
    font-family: 'Noto Sans JP',
        'Hiragino Kaku Gothic ProN',
        'ヒラギノ角ゴ ProN W3',
        'Helvetica Neue',
        Arial,
        'Hiragino Sans',
        'Meiryo',
        sans-serif;
    min-width: 1280px;
}

a {
    text-decoration: none;
    color: #333;
}

li {
    list-style: none;
}

img {
    max-width: 100%;
    vertical-align: bottom;
    -webkit-backface-visibility: hidden;
}

p {
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.contents-wrapper {
    /* min-width: 1100px; */
}

.contents {
    margin: 0 auto;
    letter-spacing: 0.05em;
    line-height: 1.5;
    text-align: center;
    padding-top: 64px;
}

.fixed_bg::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-position: 50% 100%;
    background-image: url(../img/tile_pl.png);
    background-repeat: repeat;
    background-size: 9%;
}

.el_diagonalBg_parts_rd {
    background: #d50913;
}

.el_diagonalBg_parts_bl {
    background: #0069b6;
}

.el_diagonalBg {
    position: relative;
    z-index: 0;
    margin: 0;
    padding: 140px 3% 100px;
    color: #000;
}

.el_diagonalBg::after {
    content: '';
    position: absolute;
    left: 0;
    top: -8.6rem;
    /*四角形を傾けます*/
    transform: skewY(-7deg);
    transform-origin: top right;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #fff;
}

.el_separator {
    margin: 0 0.5em;
}

.el_sp {
    display: none;
}

.el_sp_inlinebl {
    display: none;
}

.el_inner {
    padding: 0 3%;
}

.normalColor {
    background-color: #000;
    border: solid 2px #000;
    color: #000;
}

.teamColor_mr {
    background-color: #e60012;
    border: solid 2px #e60012;
}

.teamColor_kc {
    background-color: #eb6100;
}

.teamColor_ds {
    background-color: #2aa738;
    border: solid 2px #2aa738;
}

.teamColor_gu {
    background-color: #01b5bb;
    border: solid 2px #01b5bb;
}

.teamColor_en {
    background-color: #a72126;
    border: solid 2px #a72126;
}

.teamColor_dy {
    background-color: #2a3f0b;
    border: solid 2px #2a3f0b;
}

.teamColor_al {
    background-color: rgb(246 0 87);
}

.teamColor_ab {
    background-color: rgb(31 84 220);
}

.teamColor_tg {
    background-color: rgb(30 117 58);
}

.teamColor_fg {
    background-color: rgb(202 12 0);
}

.teamTextColor_mr {
    color: #e60012;
}

.teamTextColor_kc {
    color: #eb6100;
}

.teamTextColor_ds {
    color: #2aa738;
}

.teamTextColor_gu {
    color: #01b5bb;
}

.teamTextColor_en {
    color: #a72126;
}

.teamTextColor_dy {
    color: #2a3f0b;
}

.teamBgColor_mr {
    background-color: #e60012;
}

.teamBgColor_kc {
    background-color: #eb6100;
}

.teamBgColor_ds {
    background-color: #2aa738;
}

.teamBgColor_gu {
    background-color: #01b5bb;
}

.teamBgColor_en {
    background-color: #a72126;
}

.teamBgColor_dy {
    background-color: #2a3f0b;
}

.el_right {
    text-align: right;
}

.el_circle {
    border-radius: 20px;
    z-index: 1;
}

.el_comingsoon {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* font-size: 50px; */
    letter-spacing: 0.06em;
    font-size: min(60px, 9rem);
    font-weight: bold;
    color: #fff;
    width: 100%;
    text-align: center;
}

.el_colorMask {
    position: absolute;
    background: rgba(0, 0, 0, .5);
    display: block;
    width: 100%;
    height: 100%;
    z-index: 4;
}

.el_hover {
    transition: all .25s ease;
    opacity: 1;
}

.el_hover:hover {
    opacity: .8;
}

.el_width_l {
    max-width: 1000px;
    margin: 0 auto;
}

.el_width_m {
    max-width: 950px;
    margin: 0 auto;
}

.el_blank {
    margin-bottom: 220px;
}

.el_diagonalBg {
    position: relative;
    z-index: 0;
    padding: 140px 3% 100px;
    color: #000;
}

.el_diagonalBg {
    padding: 119px 3% 85px;
}

.el_paragraph {
    display: none;
}

.el_bg__bl {
    background-color: #0069b6;
}

.el_bg__plbl {
    background-color: #2196F3;
}

.el_bg__bk {
    background-color: #000;
}

.el_bg__rd {
    background-color: #d50913;
}

.el_bg__gr {
    background-color: #f5f5f5;
}

.el_border__bl {
    border: 2px solid #0069b6;
}

.el_accent_Box {
    max-width: 120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    /* margin-bottom: 50px; */
}

.el_accent {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.js_marker {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 5px;
    left: 0;
    /*線の形状*/
    width: 100%;
    height: 5px;
    /*アニメーションの指定*/
    transition: 1s ease-in-out;
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    transform: scale(0, 1);
    transform-origin: left top;
    /*左上基点*/
    z-index: -1;
}

.js_marker.js_marker_flow {
    bottom: -1px;
    height: 1.5px;
}

.js_marker.is-active {
    transform: scale(1, 1);
}

.js_marker.el_bg__bl {
    background-image: linear-gradient(90deg, rgb(0 105 182), rgb(0 105 182));
    opacity: .8;
}

.js_marker.el_bg__rd {
    background-image: linear-gradient(90deg, rgb(213 9 19), rgb(213 9 19));
    opacity: .8;
}

.js_marker_l {
    display: inline;
    position: relative;
    background-image: linear-gradient(90deg, #ffff66, #ffff66);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 100%;
    transition: all 1s ease-in-out;
    font-weight: bold;
}

.js_marker_l.is-active {
    background-size: 100% 100%;
}

.js_fade__anim {
    /* transition: transform .7s ease 0s,opacity .7s ease 0s; */
    /* 2024/12/25 アニメーションを全てOFFに変更
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    transition-duration: .7s;
    */
}

.js_fade__anim.js_fadeIn {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/*左右のアニメーション*/
.leftAnime {
    overflow: hidden;
    display: inline-block;
    opacity: 0;
}

.slideAnimeLeftRight {
    animation-name: slideTextX100;
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }


    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.slideAnimeRightLeft {
    animation-name: slideTextX-100;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.bl_top {
    position: relative;
}

.bl_topImg {
    position: relative;
    width: 100%;
    min-height: 55vh;
    background: url(../img/kankin72_header_pc_2.jpg) center / cover;
}

.main_contents {
    background-image: url(../img/bg.jpg);
    background-repeat: repeat;
    background-size: contain;
    padding-top: 20px;
}

.bl_slider {
    margin-bottom: 20px;
}

.bl_slider_head {
    max-width: 930px;
    margin: 0 auto 20px;
}

/* footer */
.bl_footer {
    position: relative;
    /* z-index: 99; */
    /* margin-top: -300px; */
    background: #000;
    color: #fff;
    margin-top: 240px;
    padding-bottom: 20px 0;
}

.bl_footer_inner {
    max-width: 890px;
    margin: 0 auto 50px;
    padding: 70px 0 20px;
}

.bl_footer_linkWrap {
    margin-bottom: 90px;
}

.bl_footer_head {
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
}

.bl_footer_link_iconWrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.bl_footer_link_icon:not(:last-child) {
    margin-right: 40px;
}

.bl_footer_link_icon img {
    height: 41px;
}

.bl_footer_sponsorWrap {
    display: flex;
    justify-content: center;
}

.bl_footer_sponsor_Box {
    display: flex;
}

.bl_footer_link_sponsor {
    border: 1px solid #fff;
    margin-right: 30px;
}

.bl_footer_link_iconWrap_space {
    margin-right: 40px;
}

.bl_footer_link_sponsor_s {
    background-color: #fff;
    border: 1px solid #fff;
}

.bl_footer_link_icon,
.bl_footer_link_sponsor,
.bl_footer_link_sponsor_s {
    transition: all .25s ease;
}

.bl_footer_link_icon:hover,
.bl_footer_link_sponsor:hover,
.bl_footer_link_sponsor_s:hover {
    opacity: .8;
}

.bl_footer_link_sponsor_s:not(:last-child) {
    margin-right: 30px;
}

.bl_footer_link_sponsor img,
.bl_footer_link_sponsor_s img {
    height: 68px;
}

.bl_footer_txt {
    font-size: 13px;
    line-height: 1.75;
    /* font-weight: bold; */
    margin-bottom: 40px;
}

/* ページTOPへ */
/* ページTOPへ戻る */
.page_top {
    position: fixed;
    bottom: 3vw;
    right: 5%;
    z-index: 7;
    display: none;
    cursor: pointer;
}

.page_top_inner {
    width: 81px;
    height: 81px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}


.page_top_img {
    width: 10.9vw;
    max-width: 60px;
    min-width: 50px;
}

.page_top_txt {
    font-size: 14px;
    font-weight: bold;
}

/* フォント装飾 */

.el_txtColor_red {
    color: #f44336;
}

.el_txtWeight_off {
    font-weight: normal;
}

@media screen and (max-width: 767px) {
    body {
        min-width: unset;
    }

    .el_paragraph {
        display: block;
    }

    .img-wrapper {
        padding: 0;
    }

    .el_pc {
        display: none;
    }

    .el_sp {
        display: block;
    }

    .el_sp_inlinebl {
        display: inline-block;
    }

    .contents {
        padding-top: 73px;
        /* padding-top: min(30rem, 140px); */
    }

    .fixed_bg {
        /* padding: 6rem 0; */
    }

    .fixed_bg::before {
        background-size: 12%;
    }

    .el_diagonalBg {
        margin: 0;
        padding: 22rem 3%;
    }

    .el_blank {
        margin-bottom: 29rem;
    }

    .el_pc_paragraph {
        display: none;
    }

    .el_sp_paragraph {
        display: block;
    }

    .el_accent_Box {
        width: min(25rem, 120px);
    }

    .el_accent {
        width: min(3.8rem, 14px);
        height: min(3.8rem, 14px);
    }

    .js_marker {
        height: 3px;
    }


    .js_fade__anim {
        transform: translate3d(0, 30px, 0);
    }

    .bl_footer {
        margin-top: 0;
        padding: min(23rem, 70px) 3% 20px;
    }

    .bl_footer_inner {
        padding: 0;
    }

    .bl_footer_linkWrap {
        max-width: 500px;
        margin: 0 auto min(13rem, 90px);
    }

    .bl_footer_head {
        font-size: min(6.5rem, 21px);
        margin-bottom: min(7rem, 20px);
    }

    .bl_footer_link_iconWrap {
        margin-bottom: 20px;
    }

    .bl_footer_link_icon:not(:last-child) {
        margin-right: min(12rem, 45px);
    }

    .bl_footer_link_iconWrap_space {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .bl_footer_link_icon img {
        height: min(12rem, 35px);
    }

    .bl_footer_sponsorWrap {
        flex-flow: column;
    }

    .bl_footer_sponsor_Box {
        margin-bottom: min(6rem, 20px);
        justify-content: center;
    }

    .bl_footer_link_sponsor {
        margin-right: unset;
        width: calc(50% - (min(9rem, 30px) / 2));
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bl_footer_link_sponsor img,
    .bl_footer_link_sponsor_s img {
        height: unset;
    }

    .bl_footer_link_sponsor:not(:last-child) {
        margin-right: min(9rem, 30px);
    }

    .bl_footer_link_sponsor_s {
        width: calc((100% / 4) - (min(9rem, 30px) / 3));
    }

    .bl_footer_link_sponsor_s:not(:last-child) {
        margin-right: min(9rem, 30px);
    }

    .bl_footer_link_iconWrap_space {
        margin-right: 0;
    }

    .bl_footer_txt {
        font-size: 12px;
        margin-bottom: min(38rem, 90px);
    }
}