/*
*Theme Name:CRAQUES
*Author: JP
*Description:
*Version: 1.0
*/

/*navigation*/
.gnavi_body {
    width: 100%;
    height: 50px;
    background-color: #25603b;
}

.gnavi_inner {
    width: 100%;
    height: 50px;

    margin: 0 auto;
    background-color: #25603b;
}

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

.match {
    width: auto;
    height: 50px;
    font-family: "arial";
    font-size: 0.7vw;
    font-weight: 700;
    padding: 0px 8px 0px 8px;
    line-height: 50px;
    color: #fff;
}

.match:hover {
    color: #bebebe;
}

.club {
    width: auto;
    height: 50px;
    font-family: "arial";
    font-size: 0.7vw;
    font-weight: 700;
    padding: 0px 8px 0px 8px;
    line-height: 50px;
    color: #fff;
    cursor: default;
}

.club:hover {
    color: #bebebe;
}

.top {
    width: auto;
    height: 50px;
    font-family: "arial";
    font-size: 0.7vw;
    font-weight: 700;
    padding: 0px 8px 0px 8px;
    line-height: 50px;
    color: #fff;
    cursor: default;
}

.top:hover {
    color: #bebebe;
}

.school_academy {
    width: auto;
    height: 50px;
    font-family: "arial";
    font-size: 0.7vw;
    font-weight: 700;
    padding: 0px 8px 0px 8px;
    line-height: 50px;
    color: #fff;
    cursor: default;
}

.school_academy:hover {
    color: #bebebe;
}

.NEWS {
    width: auto;
    height: 50px;
    font-family: "arial";
    font-size: 0.7vw;
    font-weight: 700;
    padding: 0px 8px 0px 8px;
    line-height: 50px;
    color: #fff;
}

.NEWS:hover {
    color: #bebebe;
}

.DEP {
    width: auto;
    height: 50px;
    font-family: "arial";
    font-size: 0.7vw;
    font-weight: 700;
    padding: 0px 8px 0px 8px;
    line-height: 50px;
    color: #fff;
}

.DEP:hover {
    color: #bebebe;
}

.recruit {
    width: auto;
    height: 50px;
    font-family: "arial";
    font-size: 0.7vw;
    font-weight: 700;
    padding: 0px 8px 0px 8px;
    line-height: 50px;
    color: #fff;
}

.recruit:hover {
    color: #bebebe;
}

.partner {
    width: auto;
    height: 50px;
    font-family: "arial";
    font-size: 0.7vw;
    font-weight: 700;
    padding: 0px 8px 0px 8px;
    line-height: 50px;
    color: #fff;
}

.partner:hover {
    color: #bebebe;
}

.contact {
    width: auto;
    height: 50px;
    font-family: "arial";
    font-size: 0.7vw;
    font-weight: 700;
    padding: 0px 8px 0px 8px;
    line-height: 50px;
    color: #fff;
}

/*
a.nolink {
    pointer-events: none;
}
    */

a.disabled {
    pointer-events: none;
}


.contact:hover {
    color: #bebebe;
}

.main_logo {
    width: 150px;
    height: 50px;
    background-color: #25603b;
    text-align: center;
}

.craques_main_logo {
    width: 55px;
    height: auto;
    margin-top: -38px;
    z-index: 999;
}

.gnavi__list {
    position: relative;
    /* 親要素を基準点に */
}

.gnavi__list:hover {
    background-color: #25603b;
}

.gnavi__list:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #25603b;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
}

.gnavi__list:hover::before {
    background-color: #25603b;
}

.gnavi__list a {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    font-size: min(1.5vw, 12px);
    letter-spacing: 0.05em;
    font-weight: 800;
    transition: all 0.3s;
    text-align: center;
}

.gnavi__list:hover a {
    color: #aaaaaa;
}

.dropdown__lists {
    display: none;
    /*デフォルトでは非表示の状態にしておく*/
    width: 100%;
    position: absolute;
    top: 30px;
    left: 0;
}

.gnavi__list:hover .dropdown__lists {
    display: block;
    /*Gナビメニューにホバーしたら表示*/
}

.dropdown__list {
    background-color: #000;
    list-style: none;
    height: 30px;
    width: auto;
    transition: all 0.3s;
    position: relative;
    top: 100%;
    z-index: 2;
}

.dropdown__list:not(:first-child)::before {
    content: "";
    width: 70%;
    height: 1px;
    background-color: #25603b;
    position: absolute;
    top: 0;
    left: 0;
}

.dropdown__list:hover {
    background-color: #373737;
}

.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}

.dropdown__list a::before {
    content: "";
    display: none;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
}

.dropdown__lists {
    visibility: hidden;
    /*デフォルトでは非表示の状態にしておく*/
    opacity: 0;
    /*不透明度0*/
    transition: all 0.3s;
    /*表示の変化を0.3秒に指定*/
    width: 250px;
    position: absolute;
    top: 34px;
    left: -35px;
}

.gnavi__list:hover .dropdown__lists {
    visibility: visible;
    /*Gナビメニューにホバーしたら表示*/
    opacity: 1;
    /*不透明度1*/
}

@media screen and (max-width: 900px) {

    .gnavi_inner {
        width: 100%;
        height: 40px;

        margin: 0 auto;
        background-color: #25603b;
    }

    .match {
        width: auto;
        height: 50px;
        font-family: "arial";
        font-size: 0.9vw;
        font-weight: 700;
        padding: 0px 4px 0px 4px;
        line-height: 50px;
        color: #fff;
    }

    .match:hover {
        color: #bebebe;
    }

    .club {
        width: auto;
        height: 50px;
        font-family: "arial";
        font-size: 0.9vw;
        font-weight: 700;
        padding: 0px 4px 0px 4px;
        line-height: 50px;
        color: #fff;
    }

    .club:hover {
        color: #bebebe;
    }

    .top {
        width: auto;
        height: 50px;
        font-family: "arial";
        font-size: 0.9vw;
        font-weight: 700;
        padding: 0px 4px 0px 4px;
        line-height: 50px;
        color: #fff;
    }

    .top:hover {
        color: #bebebe;
    }

    .school_academy {
        width: auto;
        height: 50px;
        font-family: "arial";
        font-size: 0.9vw;
        font-weight: 700;
        padding: 0px 4px 0px 4px;
        line-height: 50px;
        color: #fff;
    }

    .school_academy:hover {
        color: #bebebe;
    }

    .NEWS {
        width: auto;
        height: 50px;
        font-family: "arial";
        font-size: 0.9vw;
        font-weight: 700;
        padding: 0px 4px 0px 4px;
        line-height: 50px;
        color: #fff;
    }

    .NEWS:hover {
        color: #bebebe;
    }

    .DEP {
        width: auto;
        height: 50px;
        font-family: "arial";
        font-size: 0.9vw;
        font-weight: 700;
        padding: 0px 4px 0px 4px;
        line-height: 50px;
        color: #fff;
    }

    .DEP:hover {
        color: #bebebe;
    }

    .recruit {
        width: auto;
        height: 50px;
        font-family: "arial";
        font-size: 0.9vw;
        font-weight: 700;
        padding: 0px 4px 0px 4px;
        line-height: 50px;
        color: #fff;
    }

    .recruit:hover {
        color: #bebebe;
    }

    .partner {
        width: auto;
        height: 50px;
        font-family: "arial";
        font-size: 0.9vw;
        font-weight: 700;
        padding: 0px 4px 0px 4px;
        line-height: 50px;
        color: #fff;
    }

    .partner:hover {
        color: #bebebe;
    }

    .contact {
        width: auto;
        height: 50px;
        font-family: "arial";
        font-size: 0.9vw;
        font-weight: 700;
        padding: 0px 4px 0px 4px;
        line-height: 50px;
        color: #fff;
    }

    .contact:hover {
        color: #bebebe;
    }

    .main_logo {
        width: 100px;
        height: 50px;
        background-color: #25603b;
    }

    .craques_main_logo {
        width: 40px;
        height: auto;
        margin-top: -15px;
        z-index: 5;
    }

}

@media screen and (max-width: 600px) {

    .gnavi_body {
        width: 100%;
        height: 30px;
        background-color: #25603b;
        display: none;
    }



    .gnavi_inner {
        width: 100%;
        height: 30px;

        margin: 0 auto;
        background-color: #25603b;
    }

    .match {
        width: auto;
        height: 30px;
        font-family: "arial";
        font-size: 1vw;
        font-weight: 700;
        padding: 0px 2px 0px 2px;
        line-height: 30px;
        color: #fff;
    }

    .match:hover {
        color: #bebebe;
    }

    .club {
        width: auto;
        height: 30px;
        font-family: "arial";
        font-size: 1vw;
        font-weight: 700;
        padding: 0px 2px 0px 2px;
        line-height: 30px;
        color: #fff;
    }

    .club:hover {
        color: #bebebe;
    }

    .top {
        width: auto;
        height: 30px;
        font-family: "arial";
        font-size: 1vw;
        font-weight: 700;
        padding: 0px 2px 0px 2px;
        line-height: 30px;
        color: #fff;
    }

    .top:hover {
        color: #bebebe;
    }

    .school_academy {
        width: auto;
        height: 30px;
        font-family: "arial";
        font-size: 1vw;
        font-weight: 700;
        padding: 0px 2px 0px 2px;
        line-height: 30px;
        color: #fff;
    }

    .school_academy:hover {
        color: #bebebe;
    }

    .NEWS {
        width: auto;
        height: 30px;
        font-family: "arial";
        font-size: 1vw;
        font-weight: 700;
        padding: 0px 2px 0px 2px;
        line-height: 30px;
        color: #fff;
    }

    .NEWS:hover {
        color: #bebebe;
    }

    .DEP {
        width: auto;
        height: 30px;
        font-family: "arial";
        font-size: 1vw;
        font-weight: 700;
        padding: 0px 2px 0px 2px;
        line-height: 30px;
        color: #fff;
    }

    .DEP:hover {
        color: #bebebe;
    }

    .recruit {
        width: auto;
        height: 30px;
        font-family: "arial";
        font-size: 1vw;
        font-weight: 700;
        padding: 0px 2px 0px 2px;
        line-height: 30px;
        color: #fff;
    }

    .recruit:hover {
        color: #bebebe;
    }

    .partner {
        width: auto;
        height: 30px;
        font-family: "arial";
        font-size: 1vw;
        font-weight: 700;
        padding: 0px 2px 0px 2px;
        line-height: 30px;
        color: #fff;
    }

    .partner:hover {
        color: #bebebe;
    }

    .contact {
        width: auto;
        height: 30px;
        font-family: "arial";
        font-size: 1vw;
        font-weight: 700;
        padding: 0px 2px 0px 2px;
        line-height: 30px;
        color: #fff;
    }

    .contact:hover {
        color: #bebebe;
    }

    .main_logo {
        width: 50px;
        height: 30px;
        background-color: #25603b;
    }

    .craques_main_logo {
        width: 30px;
        height: auto;
        margin-top: -25px;
        z-index: 5;
    }

    .dropdown__list {
        background-color: #000;
        list-style: none;
        height: 20px;
        width: auto;
        transition: all 0.3s;
        position: relative;
        top: 100%;
        z-index: 2;
    }

    .dropdown__lists {
        visibility: hidden;
        /*デフォルトでは非表示の状態にしておく*/
        opacity: 0;
        /*不透明度0*/
        transition: all 0.3s;
        /*表示の変化を0.3秒に指定*/
        width: 150px;
        position: absolute;
        top: 30px;
        left: -35px;
    }

}

/* hamberger_menu */
/* 初期化 */
body {
    margin: 0;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
}

.header {
    height: fit-content;
    background-color: #063116;
    width: 100%;
    z-index: 1000;
}

.header-inner {
    padding: 0;
    display:flex;
}

@media screen and (min-width: 601px) {
    .header-inner {
        display:none;
    }
}

.hamburger_title{
    font-size:30px;
    color: #FFF;
    font-family: "teko";
}

.craques_hamburger_logo {
    width: 30px;
    height: auto;
    z-index: 5;
    margin: 3px 6px 3px 6px;

}
/* ---------------------------------------------- */
/* ハンバーガーメニュー */
/* ------------------------- */
#header-hamburger {
    /* 見た目のCSS */
    background: #25603B;
    cursor: pointer;
    width: 50px;
    aspect-ratio: 1/1;
    margin-left: auto;
    /* ボタンがハンバーガーウィンドウの下に隠れないようにする指定 */
    position: relative;
    z-index: 10;
}

/* ----------------- */
/* 三本線 */
/* ----------------- */
#header-hamburger span {
    /* 見た目のCSS */
    display: inline-block;
    background: #fff;
    width: 50%;
    height: 2px;
    /* バーガー線の太さ */
    /*アニメーションの設定*/
    transition: all .4s;
    position: absolute;
    left: 50%;
    /* バーガー線の位置 */
    transform: translateX(-50%);
}

/* １本目 */
#header-hamburger span:nth-of-type(1) {
    top: 30%;
}

/* ２本目 */
#header-hamburger span:nth-of-type(2) {
    top: 50%;
}

/* ３本目 */
#header-hamburger span:nth-of-type(3) {
    top: 70%;
}

/* ------------------ */
/* ×印 */
/* ------------------ */
/*activeクラスが付与されると線が回転して×になる*/
#header-hamburger.active span:nth-of-type(1) {
    top: 50%;
    left: 25%;
    transform: rotate(-45deg);
    width: 50%;
}

#header-hamburger.active span:nth-of-type(2) {
    opacity: 0;
}

#header-hamburger.active span:nth-of-type(3) {
    top: 50%;
    left: 25%;
    transform: rotate(45deg);
    width: 50%;
}

/* ----------------------------------------------- */
/* メニューウィンドウ */
/* -------------------------- */
#hamburger-window {
    transition: 0.3s;
    text-align: center;
    /* 初期状態は非表示 */
    visibility: hidden;
    position: fixed;
    top: 50px;
    right: -100vw;
    z-index: 1;
    /* 画面いっぱいに表示されるサイズに設定 */
    width: 100%;
    height: 100vh;
    /* 画面からはみ出したらスクロール可能にする */
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: 999;
}

/*スクロールバー非表示（Chrome・Safari）*/
.content::-webkit-scrollbar {
    display: none;
}

#hamburger-window.open {
    visibility: visible;
    right: 0;
}

.hamburger-window__link {
    display: block;
    margin: 0 auto;
    width: 100%;
    background-color: #25603b;
    z-index: 999;
}

.hamburger-window__link:hover {
    background-color: #063116;
}

.hamburger-window__link p {
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;

}

.hamburger-window__link:first-child .acordion-btn {
    border-top: 1px solid #ccc;
}


/* ----------------------------------
アコーディオン部分
--------------------- */
.acordion-menu-wrapper {
    background-color: #25603b;
}

.acordion-btn {
    display: flex;
    align-items: center;
    padding-left: 5%;
}

.acordion-btn:hover {
    background-color: #063116;
}

.acordion-btn::after {
    /* fontawesomeアイコンを表示 */
    content: '\2b';
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    display: inline-block;
    position: absolute;
    right: 5%;
    width: 10px;
    aspect-ratio: 1/1;
    color: #fff;
}

.acordion-btn.is-open::after {
    /* fontawesomeアイコンを表示 */
    content: '\f068';
}

.hamburger-window__link {
    border-top: 1px solid #25603b;
}

.hamburger-window__title,
.hamburger-window__link>a {
    color: #fff;
}

.hamburger-window__link>a {
    display: block;
    text-align: left;
    padding-left: 5%;
    position: relative;
}

.hamburger-window__link>a::after {
    /* fontawesomeアイコンを表示 */
    content: '\f054';
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5%;
    width: 10px;
    aspect-ratio: 1/1;
    color: #fff;
}

.acordion>.acordion__item {
    position: relative;
    text-align: left;
    width: 100%;
    background-color: #dfdfdf;
    /* 閉じている状態 */
    border-top: 0 #ccc solid;
    line-height: 0;
    /* 閉じるアニメーション */
    transition:
        border-top .1s ease-out,
}

.acordion.is-open>.acordion__item {
    background-color: #dfdfdf;
    /* 開いている状態 */
    border-top: 1px #ccc solid;
    /* 開くアニメーション */
    transition:
        border-top .1s ease-out,
}

.acordion.is-open>.acordion__item:first-child {
    border-top: none;
}

.acordion.is-open>.acordion__item::after {
    /* fontawesomeアイコンを表示 */
    content: '\f054';
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 10%;
    width: 10px;
    aspect-ratio: 1/1;
    color: #333;
}

.acordion>.acordion__item>.acordion__link {
    color: #333;
    display: block;
    padding-left: 7%;
    /* 閉じている状態 */
    padding-top: 0;
    padding-bottom: 0;
    line-height: 0;
    opacity: 0;
    visibility: hidden;
    /* 閉じるアニメーション */
    transition:
        padding-top .3s ease-out,
        padding-bottom .3s ease-out,
        line-height .3s ease-out,
        opacity .1s linear,
        visibility .1s linear;
}

.acordion.is-open>.acordion__item>.acordion__link {
    display: block;
    padding-left: 7%;
    /* 開いている状態 */
    padding-top: 23px;
    padding-bottom: 23px;
    line-height: 1.5;
    opacity: 1;
    visibility: visible;
    /* 開くアニメーション */
    transition:
        padding-top .3s ease-out,
        padding-bottom .3s ease-out,
        line-height .3s ease-out,
        opacity .1s linear,
        visibility .1s linear;
}

/*family_logo*/
.linkfamily {
    width: 100%;
    height: 40px;
    background-color: #063116;
    display: flex;
}

.linkfamily_inner {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    background-color: #063116;
    display: flex;
}

.logo_content_craques {
    width: 150px;
    height: 40px;
    line-height: 40px;
    display: flex;
}

.logo_content_natureza {
    width: 180px;
    height: 40px;
    line-height: 40px;
    display: flex;
    margin-left: 5px;
}

.craques_logo {
    width: 50px;
    height: 40px;
    /*background-color: blue;*/
    margin: 0px;
    line-height: 40px;
    text-align: center;
}

.craques_name {
    width: 100px;
    height: 40px;
    /*background-color: yellow;*/
    margin: 0px;
    color: #fff;
}

.craques_name:hover {
    color: #bebebe;
}

.natureza_logo {
    width: 50px;
    height: 40px;
    /*background-color: blue;*/
    margin: 0px;
    line-height: 40px;
    text-align: center;
}

.natureza_name {
    width: 130px;
    height: 40px;
    /*background-color: yellow;*/
    margin: 0px;
    color: #fff;
}

.natureza_name:hover {
    color: #bebebe;
}

.craques_logo_35 {
    height: 30px;
}

.natureza_logo_35 {
    height: 30px;
}

@media screen and (max-width: 900px) {
    .linkfamily {
        width: 100%;
        height: 40px;
        background-color: #063116;
        display: flex;
    }

    .linkfamily_inner {
        width: 100%;
        height: 40px;
        margin: 0 auto;
        background-color: #063116;
        display: flex;
    }
}

@media screen and (max-width: 600px) {
    .linkfamily {
        width: 100%;
        height: 30px;
        background-color: #063116;
        display: none;
    }

    .linkfamily_inner {
        width: 100%;
        height: 30px;
        margin: 0 auto;
        background-color: #063116;
        display: flex;
    }

    .logo_content_craques {
        width: 65px;
        height: 30px;
        line-height: 30px;
        display: flex;
    }

    .logo_content_natureza {
        width: 90px;
        height: 30px;
        line-height: 30px;
        display: flex;
        margin-left: 3px;
    }

    .craques_logo {
        width: 20px;
        height: 30px;
        /*background-color: blue;*/
        margin: 0px;
        line-height: 30px;
        text-align: center;
    }

    .craques_name {
        width: 50px;
        height: 30px;
        /*background-color: yellow;*/
        margin: 0px;
        color: #fff;
        font-size: 8px;
    }

    .craques_name:hover {
        color: #bebebe;
    }

    .natureza_logo {
        width: 20px;
        height: 30px;
        /*background-color: blue;*/
        margin: 0px;
        line-height: 30px;
        text-align: center;
    }

    .natureza_name {
        width: 60px;
        height: 30px;
        /*background-color: yellow;*/
        margin: 0px;
        margin-left: 2px;
        color: #fff;
        font-size: 8px;
    }

    .natureza_name:hover {
        color: #bebebe;
    }

    .craques_logo_35 {
        height: 20px;
    }

    .natureza_logo_35 {
        height: 20px;
    }
}

/*footer*/

.sns {
    background-color: #063116;
    height: auto;
    width: 100%;
}

.snsinner {
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #063116;
    font-family: noto-sans;
    padding: 10px;
    font-size: 10px;
}

.sns_content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.sns_icon {
    width: auto;
    height: auto;
}

.snsicon {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    font-size: 11px;
    font-family: noto-sans;
    padding: 5px;
}

.sns_icon_30x30 {
    width: 30px;
    height: auto;
    padding-right: 3px;
}

@media screen and (max-width: 900px) {
    .sns {
        background-color: #063116;
        height: auto;
        width: 100%;
    }

    .snsinner {
        width: 450px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #063116;
        font-family: noto-sans;
        padding: 10px;
        font-size: 10px;
    }

    .sns_icon {
        width: 150px;
        height: auto;
    }

    .sns_content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
    }

}

@media screen and (max-width: 468px) {
    .sns {
        background-color: #063116;
        height: auto;
        width: 100%;
    }

    .snsinner {
        width: 350px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #063116;
        font-family: noto-sans;
        padding: 3px;
        font-size: 8px;
    }

    .snsicon {
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        font-size: 8px;
        font-family: noto-sans;
        padding: 5px;
    }

    .sns_icon {
        width: 150px;
        height: auto;
    }

    .sns_content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
    }

}

.snsicon:hover {
    color: #aaaaaa;
}


/*footer*/

.footer_menu {
    background-color: #063116;
    height: auto;
    width: 100%;
}

.footer_inner {
    width: 1040px;
    max-width: 100%;
    height: 300px;
    margin: 0 auto;
    font-family: noto-sans;
    padding: 10px;
    font-size: 10px;

}

.footer_inner_menu_box {
    width: 1000px;
    max-width: 100%;
    height: 250px;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    list-style: none;
}

.footer_menu_box {
    width: 160px;
    font-family: noto-sans;
    font-size: 10px;
    list-style: none;
}

.footer_menu_index {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif !important;
    margin-bottom: 5px;
}

.disabled {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif !important;
    margin-bottom: 5px;
}

.footer_menu_index:hover {
    color: #aaaaaa;
    text-decoration: none;
}

.footer_menu_index_table {
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 10px;
    margin-top: 1px;
    margin-bottom: 0;
}

.footer_menu_index_table:hover {
    color: #aaaaaa;
    text-decoration: none;
}

@media screen and (max-width: 900px) {

    .footer_menu {
        background-color: #063116;
        height: auto;
        width: 100%;
    }

    .footer_inner {
        width: 468px;
        max-width: 100%;
        height: 500px;
        margin: 0 auto;
        font-family: noto-sans;
        padding: 10px;
        font-size: 10px;

    }

    .footer_inner_menu_box {
        width: 400px;
        max-width: 100%;
        height: 500px;
        margin: 0 auto;
        padding: 10px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        list-style: none;
    }

    .footer_menu_box {
        width: 160px;
        font-family: noto-sans;
        font-size: 10px;
        list-style: none;
    }

    .footer_menu_index {
        display: block;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        font-family: 'Noto Sans JP', sans-serif !important;
        margin-bottom: 5px;
    }

    .footer_menu_index:hover {
        color: #aaaaaa;
        text-decoration: none;
    }

    .footer_menu_index_table {
        display: block;
        text-decoration: none;
        color: #fff;
        font-size: 8px;
        margin-top: 1px;
        margin-bottom: 0;
    }

    .footer_menu_index_table:hover {
        color: #aaaaaa;
        text-decoration: none;
    }

}


/*<!-- Swiper -->*/

/* player_main_page */

/* modal */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.content {
    margin: 0 auto;
    padding: 40px;
}

.modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    font-size: 10px;
    z-index: 100;
}

.modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal__content {
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
}

/*TOP*/
.page_name {
    text-align: center;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
    font-weight: 300;
}

.position_name {
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
    font-weight: 300;
    border-bottom: solid 5px #25603b;
    display: table;
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 50px;
}

.player_main_page {
    padding-top: 40px;
    background-color: #c0c0c0;
}

/*player_list*/

.player_main_page_inner {
    width: 1000px;
    height: auto;
    margin: 0 auto;
    background-color: #c0c0c0;
}

.player_comingsoon {
    width: 200px;
    height: 250px;
    object-fit: cover;
    vertical-align: top;
}

/*line_animation */
.boxs {
    display: flex;
    height: auto;
    margin: 0 auto;
    flex-wrap: wrap;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 20px;
}

.boxs_inner {
    width: 250px;
    height: 400px;
    list-style: none;
}

.box {
    width: 200px;
    height: 350px;
    position: relative;
    display: block;
    cursor: pointer;
    background-color: #fff;
    margin: 0 auto;
    font-family: noto-sans, Meiryo, sans-serif;
}

.box__line {
    position: absolute;
    transition: transfrom 0.5s;
}

.box__line:nth-child(1),
.box__line:nth-child(3) {
    width: 100%;
    height: 2px;
    background: #25603b;
}

.box__line:nth-child(2),
.box__line:nth-child(4) {
    width: 2px;
    height: 100%;
    background: #25603b;
}

.box__line:nth-child(1) {
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s;
}

.box__line:nth-child(2) {
    top: 0;
    left: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s;
}

.box__line:nth-child(3) {
    bottom: 0;
    left: 0;
    transform-origin: left;
    transition: transform 0.5s;
}

.box__line:nth-child(4) {
    top: 0;
    right: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s;
}

.box:hover .box__line:nth-child(1) {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.5s;
}

.box:hover .box__line:nth-child(2) {
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform 0.5s;
}

.box:hover .box__line:nth-child(4) {
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.5s;
}

.team_member__data {
    width: 200px;
    height: 100px;
    display: flex;
    color: #111;
}

.team_member__data-unit {
    width: 80px;
    height: 100px;
}

.team_member__data-unit2 {
    width: 120px;
    height: 100px;
}

.team_member__number {
    font-size: 25px;
    margin: 0px;
    text-align: center;
}

.team_member__position {
    font-size: 18px;
    margin: 0px;
    text-align: center;
}

.team_member__hg {
    font-size: 12px;
    margin: 0px;
    padding-top: 0;
    text-align: center;
}

.team_member__name-ja {
    font-size: 20px;
    padding-top: 5px;
    margin: 0px;
    text-align: left;
}


.team_member__name-en {
    font-size: 10px;
    padding-top: 1px;
    margin: 0px;
    text-align: left;
}

.team_member__text {
    font-size: 9px;
    padding-top: 6px;
    margin: 0px;
    text-align: left;
}

.player_list_link:hover {
    text-decoration: none;
    color: inherit;
}

.team_member__data_staff {
    width: 200px;
    height: 100px;
    display: flex;
    color: #111;
}

.team_member__data-unit_staff {
    width: 200px;
    height: 100px;
}

.team_member__position_staff {
    font-size: 15px;
    margin: 0px;
    padding: 2px 0px 0px 5px;
}

.team_member__name-ja_staff {
    font-size: 18px;
    padding: 5px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

.team_member__name-en_staff {
    font-size: 10px;
    padding: 0px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

.team_member__text_staff {
    font-size: 10px;
    padding: 4px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

@media screen and (max-width: 900px) {
    .player_main_page_inner {
        width: 750px;
        height: auto;
        margin: 0 auto;
        background-color: #c0c0c0;
    }
}

@media screen and (max-width: 600px) {
    .player_main_page_inner {
        width: 375px;
        height: auto;
        margin: 0 auto;
        background-color: #c0c0c0;
    }

    .player_comingsoon {
        width: 150px;
        height: 200px;
        object-fit: cover;
        vertical-align: top;
    }

    /*line_animation */
    .boxs {
        display: flex;
        height: auto;
        margin: 0 auto;
        flex-wrap: wrap;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 20px;
    }

    .boxs_inner {
        width: 185px;
        height: 320px;
        list-style: none;
    }

    .box {
        width: 150px;
        height: 280px;
        position: relative;
        display: block;
        cursor: pointer;
        background-color: #fff;
        margin: 0 auto;
    }

    .team_member__data {
        width: 150px;
        height: 80px;
        display: flex;
        color: #111;
    }

    .team_member__data-unit {
        width: 60px;
        height: 75px;
    }

    .team_member__data-unit2 {
        width: 90px;
        height: 75px;
    }

    .team_member__number {
        font-size: 18.75px;
        margin: 0px;
        text-align: center;
    }

    .team_member__position {
        font-size: 13.5px;
        margin: 0px;
        text-align: center;
    }

    .team_member__hg {
        font-size: 10px;
        margin: 0px;
        padding-top: 0;
        text-align: center;
    }

    .team_member__name-ja {
        font-size: 15px;
        padding-top: 3.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__name-en {
        font-size: 7.5px;
        padding-top: 0.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__text {
        font-size: 7.5px;
        padding-top: 6px;
        margin: 0px;
        text-align: left;
    }

    .team_member__data_staff {
        width: 150px;
        height: 80px;
        display: flex;
        color: #111;
    }

    .team_member__data-unit_staff {
        width: 150px;
        height: 80px;
    }

    .team_member__position_staff {
        font-size: 11.25px;
        margin: 0px;
        padding: 1.5px 0px 0px 3.75px;
    }

    .team_member__name-ja_staff {
        font-size: 13.5px;
        padding: 3.75px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__name-en_staff {
        font-size: 7.5px;
        padding: 0px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__text_staff {
        font-size: 7.5px;
        padding: 3px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }
}

/*second*/
/* player_main_page */
.page_name_second {
    text-align: center;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
    font-weight: 300;
}

.position_name_second {
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
    font-weight: 300;
    border-bottom: solid 5px #831b20;
    display: table;
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 50px;
}

.player_main_page {
    padding-top: 40px;
    background-color: #c0c0c0;
}

/*player_list*/

.player_main_page_inner {
    width: 1000px;
    height: auto;
    margin: 0 auto;
    background-color: #c0c0c0;
}

.player_comingsoon {
    width: 200px;
    height: 250px;
    object-fit: cover;
    vertical-align: top;
}

/*line_animation */
.boxs {
    display: flex;
    height: auto;
    margin: 0 auto;
    flex-wrap: wrap;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 20px;
}

.boxs_inner {
    width: 250px;
    height: 400px;
    list-style: none;
}

.box {
    width: 200px;
    height: 350px;
    position: relative;
    display: block;
    cursor: pointer;
    background-color: #fff;
    margin: 0 auto;
    font-family: noto-sans, Meiryo, sans-serif;
}

.box__line_second {
    position: absolute;
    transition: transfrom 0.5s;
}

.box__line_second:nth-child(1),
.box__line_second:nth-child(3) {
    width: 100%;
    height: 2px;
    background: #831b20;
}

.box__line_second:nth-child(2),
.box__line_second:nth-child(4) {
    width: 2px;
    height: 100%;
    background: #831b20;
}

.box__line_second:nth-child(1) {
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s;
}

.box__line_second:nth-child(2) {
    top: 0;
    left: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s;
}

.box__line_second:nth-child(3) {
    bottom: 0;
    left: 0;
    transform-origin: left;
    transition: transform 0.5s;
}

.box__line_second:nth-child(4) {
    top: 0;
    right: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s;
}

.box:hover .box__line_second:nth-child(1) {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.5s;
}

.box:hover .box__line_second:nth-child(2) {
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform 0.5s;
}

.box:hover .box__line_second:nth-child(4) {
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.5s;
}

.team_member__data {
    width: 200px;
    height: 100px;
    display: flex;
    color: #111;
}

.team_member__data-unit {
    width: 80px;
    height: 100px;
}

.team_member__data-unit2 {
    width: 120px;
    height: 100px;
}

.team_member__number {
    font-size: 25px;
    margin: 0px;
    text-align: center;
}

.team_member__position {
    font-size: 18px;
    margin: 0px;
    text-align: center;
}

.team_member__hg {
    font-size: 12px;
    margin: 0px;
    padding-top: 0;
    text-align: center;
}

.team_member__name-ja {
    font-size: 20px;
    padding-top: 5px;
    margin: 0px;
    text-align: left;
}

.team_member__name-en {
    font-size: 10px;
    padding-top: 1px;
    margin: 0px;
    text-align: left;
}

.team_member__text {
    font-size: 9px;
    padding-top: 6px;
    margin: 0px;
    text-align: left;
}

.player_list_link:hover {
    text-decoration: none;
    color: inherit;
}

.team_member__data_staff {
    width: 200px;
    height: 100px;
    display: flex;
    color: #111;
}

.team_member__data-unit_staff {
    width: 200px;
    height: 100px;
}

.team_member__position_staff {
    font-size: 15px;
    margin: 0px;
    padding: 2px 0px 0px 5px;
}

.team_member__name-ja_staff {
    font-size: 18px;
    padding: 5px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

.team_member__name-en_staff {
    font-size: 10px;
    padding: 0px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

.team_member__text_staff {
    font-size: 10px;
    padding: 4px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

@media screen and (max-width: 900px) {

    .player_main_page_inner {
        width: 750px;
        height: auto;
        margin: 0 auto;
        background-color: #c0c0c0;
    }

}

@media screen and (max-width: 600px) {

    .player_main_page_inner {
        width: 375px;
        height: auto;
        margin: 0 auto;
        background-color: #c0c0c0;
    }

    .player_comingsoon {
        width: 150px;
        height: 200px;
        object-fit: cover;
        vertical-align: top;
    }

    /*line_animation */
    .boxs {
        display: flex;
        height: auto;
        margin: 0 auto;
        flex-wrap: wrap;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 20px;
    }

    .boxs_inner {
        width: 185px;
        height: 320px;
        list-style: none;
    }

    .box {
        width: 150px;
        height: 280px;
        position: relative;
        display: block;
        cursor: pointer;
        background-color: #fff;
        margin: 0 auto;
    }

    .team_member__data {
        width: 150px;
        height: 80px;
        display: flex;
        color: #111;
    }

    .team_member__data-unit {
        width: 60px;
        height: 75px;
    }

    .team_member__data-unit2 {
        width: 90px;
        height: 75px;
    }

    .team_member__number {
        font-size: 18.75px;
        margin: 0px;
        text-align: center;
    }

    .team_member__position {
        font-size: 13.5px;
        margin: 0px;
        text-align: center;
    }

    .team_member__hg {
        font-size: 10px;
        margin: 0px;
        padding-top: 0;
        text-align: center;
    }

    .team_member__name-ja {
        font-size: 15px;
        padding-top: 3.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__name-en {
        font-size: 7.5px;
        padding-top: 0.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__text {
        font-size: 7.5px;
        padding-top: 6px;
        margin: 0px;
        text-align: left;
    }

    .team_member__data_staff {
        width: 150px;
        height: 80px;
        display: flex;
        color: #111;
    }

    .team_member__data-unit_staff {
        width: 150px;
        height: 80px;
    }

    .team_member__position_staff {
        font-size: 11.25px;
        margin: 0px;
        padding: 1.5px 0px 0px 3.75px;
    }

    .team_member__name-ja_staff {
        font-size: 13.5px;
        padding: 3.75px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__name-en_staff {
        font-size: 7.5px;
        padding: 0px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__text_staff {
        font-size: 7.5px;
        padding: 3px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }

}

/*academy*/
/* player_main_page */
.page_name_academy {
    text-align: center;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
    font-weight: 300;
}

.position_name_academy {
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
    font-weight: 300;
    border-bottom: solid 5px #7CAECB;
    display: table;
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 50px;
}

.player_main_page {
    padding-top: 40px;
    background-color: #c0c0c0;
}

/*player_list*/

.player_main_page_inner {
    width: 1000px;
    height: auto;
    margin: 0 auto;
    background-color: #c0c0c0;
}

.player_comingsoon {
    width: 200px;
    height: 250px;
    object-fit: cover;
    vertical-align: top;
}

/*line_animation */
.boxs {
    display: flex;
    height: auto;
    margin: 0 auto;
    flex-wrap: wrap;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 20px;
}

.boxs_inner {
    width: 250px;
    height: 400px;
    list-style: none;
}

.box {
    width: 200px;
    height: 350px;
    position: relative;
    display: block;
    cursor: pointer;
    background-color: #fff;
    margin: 0 auto;
    font-family: noto-sans, Meiryo, sans-serif;
}

.box__line_academy {
    position: absolute;
    transition: transfrom 0.5s;
}

.box__line_academy:nth-child(1),
.box__line_academy:nth-child(3) {
    width: 100%;
    height: 3px;
    background: #7CAECB;
}

.box__line_academy:nth-child(2),
.box__line_academy:nth-child(4) {
    width: 2px;
    height: 100%;
    background: #7CAECB;
}

.box__line_academy:nth-child(1) {
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s;
}

.box__line_academy:nth-child(2) {
    top: 0;
    left: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s;
}

.box__line_academy:nth-child(3) {
    bottom: 0;
    left: 0;
    transform-origin: left;
    transition: transform 0.5s;
}

.box__line_academy:nth-child(4) {
    top: 0;
    right: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s;
}

.box:hover .box__line_academy:nth-child(1) {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.5s;
}

.box:hover .box__line_academy:nth-child(2) {
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform 0.5s;
}

.box:hover .box__line_academy:nth-child(4) {
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.5s;
}

.team_member__data {
    width: 200px;
    height: 100px;
    display: flex;
    color: #111;
}

.team_member__data-unit {
    width: 80px;
    height: 100px;
}

.team_member__data-unit2 {
    width: 120px;
    height: 100px;
}

.team_member__number {
    font-size: 25px;
    margin: 0px;
    text-align: center;
}

.team_member__position {
    font-size: 18px;
    margin: 0px;
    text-align: center;
}

.team_member__hg {
    font-size: 12px;
    margin: 0px;
    padding-top: 0;
    text-align: center;
}

.team_member__name-ja {
    font-size: 20px;
    padding-top: 5px;
    margin: 0px;
    text-align: left;
}

.team_member__name-en {
    font-size: 10px;
    padding-top: 1px;
    margin: 0px;
    text-align: left;
}

.team_member__text {
    font-size: 9px;
    padding-top: 6px;
    margin: 0px;
    text-align: left;
}

.player_list_link:hover {
    text-decoration: none;
    color: inherit;
}

.team_member__data_staff {
    width: 200px;
    height: 100px;
    display: flex;
    color: #111;
}

.team_member__data-unit_staff {
    width: 200px;
    height: 100px;
}

.team_member__position_staff {
    font-size: 15px;
    margin: 0px;
    padding: 2px 0px 0px 5px;
}

.team_member__name-ja_staff {
    font-size: 18px;
    padding: 5px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

.team_member__name-en_staff {
    font-size: 10px;
    padding: 0px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

.team_member__text_staff {
    font-size: 10px;
    padding: 4px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

@media screen and (max-width: 900px) {

    .player_main_page_inner {
        width: 750px;
        height: auto;
        margin: 0 auto;
        background-color: #c0c0c0;
    }

}

@media screen and (max-width: 600px) {

    .player_main_page_inner {
        width: 375px;
        height: auto;
        margin: 0 auto;
        background-color: #c0c0c0;
    }

    .player_comingsoon {
        width: 150px;
        height: 200px;
        object-fit: cover;
        vertical-align: top;
    }

    /*line_animation */
    .boxs {
        display: flex;
        height: auto;
        margin: 0 auto;
        flex-wrap: wrap;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 20px;
    }

    .boxs_inner {
        width: 185px;
        height: 320px;
        list-style: none;
    }

    .box {
        width: 150px;
        height: 280px;
        position: relative;
        display: block;
        cursor: pointer;
        background-color: #fff;
        margin: 0 auto;
    }

    .team_member__data {
        width: 150px;
        height: 80px;
        display: flex;
        color: #111;
    }

    .team_member__data-unit {
        width: 60px;
        height: 75px;
    }

    .team_member__data-unit2 {
        width: 90px;
        height: 75px;
    }

    .team_member__number {
        font-size: 18.75px;
        margin: 0px;
        text-align: center;
    }

    .team_member__position {
        font-size: 13.5px;
        margin: 0px;
        text-align: center;
    }

    .team_member__hg {
        font-size: 10px;
        margin: 0px;
        padding-top: 0;
        text-align: center;
    }

    .team_member__name-ja {
        font-size: 15px;
        padding-top: 3.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__name-en {
        font-size: 7.5px;
        padding-top: 0.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__text {
        font-size: 7px;
        padding-top: 6px;
        margin: 0px;
        text-align: left;
    }

    .team_member__data_staff {
        width: 150px;
        height: 80px;
        display: flex;
        color: #111;
    }

    .team_member__data-unit_staff {
        width: 150px;
        height: 80px;
    }

    .team_member__position_staff {
        font-size: 11.25px;
        margin: 0px;
        padding: 1.5px 0px 0px 3.75px;
    }

    .team_member__name-ja_staff {
        font-size: 13.5px;
        padding: 3.75px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__name-en_staff {
        font-size: 7.5px;
        padding: 0px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__text_staff {
        font-size: 7.5px;
        padding: 3px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }

}

/*ob*/
/* ob_page */
.position_name_ob {
    text-align: center;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
    font-weight: 300;
}

.position_name_ob {
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
    font-weight: 300;
    border-bottom: solid 5px black;
    display: table;
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 50px;
}

.ob_page {
    padding-top: 40px;
    background-color: #c0c0c0;
}

/*player_list*/

.ob_page_inner {
    width: 1000px;
    height: 1200px;
    margin: 0 auto;
    background-color: #c0c0c0;
}

.player_comingsoon {
    width: 200px;
    height: 250px;
    object-fit: cover;
    vertical-align: top;
}

/*line_animation */
.boxs_ob {
    display: flex;
    height: auto;
    margin: 0 auto;
    flex-wrap: wrap;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 20px;
}

.boxs_inner_ob {
    width: 250px;
    height: 550px;
    list-style: none;
}

.box_ob {
    width: 200px;
    height: 500px;
    position: relative;
    display: block;
    cursor: pointer;
    background-color: #fff;
    margin: 0 auto;
    font-family: noto-sans, Meiryo, sans-serif;
}

.box__line_ob {
    position: absolute;
    transition: transfrom 0.5s;
}

.box__line_ob:nth-child(1),
.box__line_ob:nth-child(3) {
    width: 100%;
    height: 3px;
    background: black;
}

.box__line_ob:nth-child(2),
.box__line_ob:nth-child(4) {
    width: 2px;
    height: 100%;
    background: black;
}

.box__line_ob:nth-child(1) {
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s;
}

.box__line_ob:nth-child(2) {
    top: 0;
    left: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s;
}

.box__line_ob:nth-child(3) {
    bottom: 0;
    left: 0;
    transform-origin: left;
    transition: transform 0.5s;
}

.box__line_ob:nth-child(4) {
    top: 0;
    right: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s;
}

.box:hover .box__line_ob:nth-child(1) {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.5s;
}

.box:hover .box__line_ob:nth-child(2) {
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform 0.5s;
}

.box:hover .box__line_ob:nth-child(4) {
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.5s;
}

.team_member__data_ob {
    width: 200px;
    height: 100px;
    display: flex;
    color: #111;
}

.team_member__data-unit_ob {
    width: 200px;
    height: 100px;
}

.team_member__position_ob {
    font-size: 15px;
    margin: 0px;
    padding: 2px 0px 0px 5px;
}

.team_member__name-ja_ob {
    font-size: 18px;
    padding: 5px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

.team_member__name-en_ob {
    font-size: 10px;
    padding: 0px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

.team_member__text_ob {
    font-size: 10px;
    padding: 4px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

.team__text_ob {
    font-size: 10px;
    padding: 4px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

@media screen and (max-width: 900px) {

    .ob_page_inner {
        width: 750px;
        height: 1200px;
        margin: 0 auto;
        background-color: #c0c0c0;
    }

}

@media screen and (max-width: 600px) {

    .ob_page_inner {
        width: 375px;
        height: 1500px;
        margin: 0 auto;
        background-color: #c0c0c0;
    }

    .player_comingsoon {
        width: 150px;
        height: 200px;
        object-fit: cover;
        vertical-align: top;
    }

    /*line_animation */
    .boxs_ob {
        display: flex;
        height: auto;
        margin: 0 auto;
        flex-wrap: wrap;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 20px;
    }

    .boxs_inner_ob {
        width: 185px;
        height: 470px;
        list-style: none;
    }

    .box_ob {
        width: 150px;
        height: 450px;
        position: relative;
        display: block;
        cursor: pointer;
        background-color: #fff;
        margin: 0 auto;
    }

    .team_member__data_ob {
        width: 150px;
        height: 80px;
        display: flex;
        color: #111;
    }

    .team_member__data-unit_ob {
        width: 150px;
        height: 80px;
    }

    .team_member__position_ob {
        font-size: 11.25px;
        margin: 0px;
        padding: 1.5px 0px 0px 3.75px;
    }

    .team_member__name-ja_ob {
        font-size: 13.5px;
        padding: 3.75px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__name-en_ob {
        font-size: 7.5px;
        padding: 0px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }

    .team_member__text_ob {
        font-size: 7.5px;
        padding: 3px 0px 0px 3.75px;
        margin: 0px;
        text-align: left;
    }

}


/*match*/
.match_event {
    text-align: center;
    color: #747474;
}

.match_main_page {
    width: 100%;
    height: auto;
    margin: 0 auto;

}

.match_main_page_inner {
    width: 1040px;
    height: auto;
    margin: 0 auto;

}

.hr {
    color: #000;
}

.match_list_item {
    width: 750px;
    height: 140px;
    list-style: none;
    display: flex;
    margin: 0 auto;
}

.match_list_info {
    width: 300px;
    height: 120px;
    margin: 10px 5px 10px 10px;
}

.match_list_stats {
    width: 450px;
    height: 120px;
    margin: 10px 10px 10px 5px;
    color: inherit;
    text-decoration: none;
}

.match_info {
    width: 250px;
    height: 40px;
    display: flex;
}

.match_data {
    width: 110px;
    height: 40px;
}

.match_data_date {
    font-family: teko;
    font-size: 40px;
    margin: 0;
    line-height: 70px;
}

.match_data_week {
    font-family: teko;
    font-size: 20px;
    margin: 0px 0px 0px 7px;
}

.match_schedule {
    width: 70px;
    height: 40px;
}

.match_schedule_time {
    font-family: teko;
    font-size: 28px;
    line-height: 70px;
}

.match_vs {
    width: 250px;
    height: 80px;
}

.league_title {
    width: 280px;
    height: 25px;
    font-family: noto-sans;
    font-size: 10px;
    line-height: 30px;
    padding-top: 5px;
}

.vs_team {
    width: 280px;
    height: 25px;
}

.vs {
    width: 30px;
    height: 30px;
    font-family: teko;
    font-size: 18px;
    line-height: 30px;
}

.team_name {
    width: 280px;
    height: 30px;
    font-family: teko;
    font-size: 16px;
}

.match_vs_stadium {
    width: 250px;
    height: 25px;
}


.label_home {
    display: inline-block;
    padding: 0px 3px 0px 3px;
    background-color: #001d46;
    color: #fff;
    font-family: Teko, sans-serif;
    font-size: 18px;
    line-height: 20px;
}

.label_away {
    display: inline-block;
    padding: 0px 3px 0px 3px;
    background-color: orange;
    color: #fff;
    font-family: Teko, sans-serif;
    font-size: 18px;
    line-height: 20px;
}

.team_stadium {
    display: inline-block;
    padding-top: px;
    font-family: sans-serif;
    font-size: 15px;
}

.fa-location-dot,
.fa-map-marker-alt {
    color: #001d46;
    padding-right: 2px;
}

.match_list_score {
    width: 432px;
    height: 120px;
    color: inherit;
}

.emb_img_home {
    width: 101px;
    height: 90px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

.score_home {
    width: 85px;
    height: 90px;
    float: left;
    font-family: teko;
    font-size: 50px;
    line-height: 90px;
    text-align: center;
}

.match_score_vs {
    width: 60px;
    height: 90px;
    float: left;
    font-family: teko;
    font-size: 60px;
    line-height: 90px;
    text-align: center;
}

.score_away {
    width: 85px;
    height: 90px;
    float: left;
    font-family: teko;
    font-size: 50px;
    line-height: 90px;
    text-align: center;
}

.emb_img_away {
    width: 101px;
    height: 90px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pk {
    font-family: teko;
    font-size: 20px;
}

.embrem_image {
    height: auto;
    width: 50px;
}

.match_list_btn {
    margin: 0 auto;
}

/* button */

.match_link {
    color: inherit;
    text-decoration: none;
}

.match_link:hover {
    color: inherit;
    text-decoration: none;
}

.button-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 124px;
    margin: 0 auto;
    padding: 3px;
    overflow: hidden;
    border: 1px solid #25603b;
    border-radius: 0px;
    background-color: #fff;
    color: #25603b;
    font-size: 14px;
    font-family: noto-sans;
    text-decoration: none !important;
}

.button-1:hover {
    background-color: transparent;
    color: #fff;
}

.button-1::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #25603b;
    content: '';
    transition: width .3s ease;
}

.button-1:hover::before {
    width: 100%;
    color: inherit;
}

.button-1::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #001d46;
    border-right: 2px solid #001d46;
    content: '';
}

.button-1:hover::after {
    border-color: #fff;
    color: inherit;
}

@media screen and (max-width: 900px) {
    .match_main_page {
        width: 100%;
        height: auto;
        margin: 0 auto;

    }

    .match_main_page_inner {
        width: 487px;
        height: auto;
        margin: 0 auto;

    }

    .hr {
        color: #000;
    }

    .match_list_item {
        width: 406.2px;
        height: 75.824px;
        list-style: none;
        display: flex;
        margin: 0 auto;
    }

    .match_list_info {
        width: 162.48px;
        height: 64.992px;
        margin: 5.41px 2.70px 5.41px 5.41px;
    }

    .match_list_stats {
        width: 243.72px;
        height: 64.992px;
        margin: 5.41px 5.41px 5.41px 2.70px;
        color: inherit;
        text-decoration: none;
    }

    .match_info {
        width: 120px;
        height: 21.664px;
        display: flex;
    }

    .match_data {
        width: 54.16px;
        height: 21.664px;
    }

    .match_data_date {
        font-family: teko;
        font-size: 21.664px;
        margin: 0;
        line-height: 37.912px;
    }

    .match_data_week {
        font-family: teko;
        font-size: 9.5px;
        margin: 0px 0px 0px 0px;
    }

    .match_schedule {
        width: 37.912px;
        height: 21.664px;
    }

    .match_schedule_time {
        font-family: teko;
        font-size: 15.164px;
        line-height: 37.912px;
    }

    .match_vs {
        width: 120px;
        height: 43.328px;
    }

    .league_title {
        width: 150px;
        height: 13.54px;
        font-family: noto-sans;
        font-size: 5.416px;
        line-height: 16.248px;
        padding-top: 2.708px;
    }

    .vs_team {
        width: 150px;
        height: 13.54px;
    }

    .vs {
        width: 16.24px;
        height: 16.24px;
        font-family: teko;
        font-size: 9.74px;
        line-height: 16.24px;
    }

    .team_name {
        width: 108.32px;
        height: 16.248px;
        font-family: teko;
        font-size: 8.5px;
    }

    .match_vs_stadium {
        width: 150px;
        height: 13.54px;
    }


    .label_home {
        display: inline-block;
        padding: 1.5px 1.62px 0px 1.62px;
        background-color: #001d46;
        color: #fff;
        font-family: Teko, sans-serif;
        font-size: 15.1648px;
        line-height: 10.832px;
    }

    .label_away {
        display: inline-block;
        padding: 1.5px 1.62px 0px 1.62px;
        background-color: orange;
        color: #fff;
        font-family: Teko, sans-serif;
        font-size: 15.1648px;
        line-height: 10.832px;
    }

    .team_stadium {
        display: inline-block;
        padding-top: px;
        font-family: sans-serif;
        font-size: 7px;
    }

    .fa-location-dot,
    .fa-map-marker-alt {
        color: #001d46;
        padding-right: 2px;
    }

    .match_list_score {
        width: 233.971px;
        height: 64.99px;
        color: inherit;
    }

    .emb_img_home {
        width: 54.701px;
        height: 48.744px;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .score_home {
        width: 46.036px;
        height: 48.744px;
        float: left;
        font-family: teko;
        font-size: 27.08px;
        line-height: 48.744px;
        text-align: center;
    }

    .match_score_vs {
        width: 32.496px;
        height: 48.744px;
        float: left;
        font-family: teko;
        font-size: 32.496px;
        line-height: 48.744px;
        text-align: center;
    }

    .score_away {
        width: 46.036px;
        height: 48.744px;
        float: left;
        font-family: teko;
        font-size: 27.08px;
        line-height: 48.744px;
        text-align: center;
    }

    .emb_img_away {
        width: 54.701px;
        height: 48.744px;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .embrem_image {
        height: auto;
        width: 27.08px;
    }

    .match_list_btn {
        margin: 0 auto;
    }

    .pk {
        font-family: teko;
        font-size: 12px;
    }
}

@media screen and (max-width: 648px) {
    .match_main_page {
        width: 100%;
        height: auto;
        margin: 0 auto;

    }

    .match_main_page_inner {
        width: 375px;
        height: auto;
        margin: 0 auto;

    }

    .hr {
        color: #000;
    }

    .match_list_item {
        width: 370px;
        height: 75.824px;
        list-style: none;
        display: flex;
        margin: 0 auto;
        padding-left: 10px;
    }

    .match_list_info {
        width: 130px;
        height: 64.992px;
        margin: 5.41px 2.70px 5.41px 5.41px;
    }

    .match_list_stats {
        width: 200px;
        height: 64.992px;
        margin: 5.41px 5.41px 5.41px 2.70px;
        color: inherit;
        text-decoration: none;
    }

    .match_info {
        width: 120px;
        height: 21.664px;
        display: flex;
    }

    .match_data {
        width: 54.16px;
        height: 21.664px;
    }

    .match_data_date {
        font-family: teko;
        font-size: 21.664px;
        margin: 0;
        line-height: 37.912px;
    }

    .match_data_week {
        font-family: teko;
        font-size: 9.5px;
        margin: 0px 0px 0px 0px;
    }

    .match_schedule {
        width: 37.912px;
        height: 21.664px;
    }

    .match_schedule_time {
        font-family: teko;
        font-size: 15.164px;
        line-height: 37.912px;
    }

    .match_vs {
        width: 130px;
        height: 43.328px;
    }

    .league_title {
        width: 130px;
        height: 13.54px;
        font-family: noto-sans;
        font-size: 5px;
        line-height: 16.248px;
        padding-top: 2.708px;
    }

    .vs_team {
        width: 120px;
        height: 13px;
    }

    .vs {
        width: 16.24px;
        height: 16.24px;
        font-family: teko;
        font-size: 9.74px;
        line-height: 16.24px;
    }

    .team_name {
        width: 108.32px;
        height: 16.248px;
        font-family: teko;
        font-size: 6.5px;
    }

    .match_vs_stadium {
        width: 120px;
        height: 13.54px;
    }


    .label_home {
        display: inline-block;
        padding: 1.5px 1.62px 0px 1.62px;
        background-color: #001d46;
        color: #fff;
        font-family: Teko, sans-serif;
        font-size: 15.1648px;
        line-height: 10.832px;
    }

    .label_away {
        display: inline-block;
        padding: 1.5px 1.62px 0px 1.62px;
        background-color: orange;
        color: #fff;
        font-family: Teko, sans-serif;
        font-size: 15.1648px;
        line-height: 10.832px;
    }

    .team_stadium {
        display: inline-block;
        padding-top: px;
        font-family: sans-serif;
        font-size: 6.5px;
    }

    .fa-location-dot,
    .fa-map-marker-alt {
        color: #001d46;
        padding-right: 2px;
    }

    .match_list_score {
        width: 233.971px;
        height: 64.99px;
        color: inherit;
    }

    .emb_img_home {
        width: 50px;
        height: 48.744px;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .score_home {
        width: 40px;
        height: 48.744px;
        float: left;
        font-family: teko;
        font-size: 27.08px;
        line-height: 48.744px;
        text-align: center;
    }

    .match_score_vs {
        width: 30px;
        height: 48.744px;
        float: left;
        font-family: teko;
        font-size: 32.496px;
        line-height: 48.744px;
        text-align: center;
    }

    .score_away {
        width: 40px;
        height: 48.744px;
        float: left;
        font-family: teko;
        font-size: 27.08px;
        line-height: 48.744px;
        text-align: center;
    }

    .emb_img_away {
        width: 50px;
        height: 48.744px;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .embrem_image {
        height: auto;
        width: 27.08px;
    }

    .match_list_btn {
        margin: 0 auto;
    }

    .pk {
        font-family: teko;
        font-size: 8px;
    }

    /* button */

    .match_link {
        color: inherit;
        text-decoration: none;
    }

    .match_link:hover {
        color: inherit;
        text-decoration: none;
    }

    .button-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 70px;
        margin: 70px;
        padding: 0.5859px;
        overflow: hidden;
        border: 0.1953px solid #25603b;
        border-radius: 0px;
        background-color: #fff;
        color: #25603b;
        font-size: 8px;
        font-family: noto-sans;
        text-decoration: none !important;
    }

    .button-1:hover {
        background-color: transparent;
        color: #fff;
    }

    .button-1::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -0.1953;
        width: 0;
        height: 100%;
        background-color: #25603b;
        content: '';
        transition: width .3s ease;
    }

    .button-1:hover::before {
        width: 100%;
        color: inherit;
    }

    .button-1::after {
        transform: rotate(45deg);
        width: 0.9765px;
        height: 0.9765px;
        margin-left: 1.953px;
        border-top: 0.3906px solid #001d46;
        border-right: 0.3906px solid #001d46;
        content: '';
    }

    .button-1:hover::after {
        border-color: #fff;
        color: inherit;
    }
}

/*top_page_news*/
.news_area {
    background-color: #bebebe;
    padding: 35px 24px;
}

.news_main_title {
    width: 1000px;
    max-width: 100%;
    height: 60px;
    margin: 0 auto;
    font-size: 35px;
    font-weight: 800;
    font-family: noto-sans;
}

.news_area_inner {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    font-family: noto-sans;
    padding: 10px 20px;
}

.news_box {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    font-family: noto-sans;
}

.news_date {
    font-family: teko;
    font-size: 14px;
    margin: 0px 0px 8px;
    text-decoration: none;
    color: grey;
    padding-left: 10px;
    padding-right: 10px;
}

.news_category {
    font-size: 12px;
    color: #000000;
}

.news_title {
    font-family: noto-sans;
    font-size: 16px;
    text-decoration: none;
    color: black;
    padding-left: 10px;
    padding-right: 10px;
}

.news_arrow_area {
    width: 1040px;
    max-width: 100%;
    height: 40px;
    margin: 0 auto;
}

.btn:hover span {
    color: #25603b;
}

.btn span {
    display: inline-block;
    text-align: center;
    padding: 7px 48px 11px 24px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    transition: all 1s cubic-bezier(0, 1, .48, .96);
    background-color: transparent;
    width: auto;
    max-width: 300px;
    color: red;
    position: relative;
}

.btn._w span {
    color: #25603b;
}

.btn span:before,
.btn span:after {
    content: "";
    position: absolute;
    transition: all .3s, all cubic-bezier(0, 1, .48, .96);
    transition: .3s;
}

.btn span:before {
    height: 1px;
    width: 18px;
    top: 19px;
    right: 19px;
    background-color: #25603b;
}

.btn._w span:before {
    background-color: #25603b;
}

.btn span:hover:before,
.btn span:hover:after {
    transform: translateX(4px);
}

.btn span:after {
    top: 15px;
    right: 15px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #25603b;
}

.btn._w span:after {
    border-left: 5solid #25603b;
}

@media screen and (max-width: 900px) {

    .news_main_title {
        width: 900px;
        max-width: 100%;
        height: 60px;
        margin: 0 auto;
        font-size: 35px;
        font-weight: 800;

    }

    .news_area_inner {
        width: 580px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 20px;
    }

    .news_box {
        width: 684px;
        max-width: 100%;
        margin: 0 auto;
        font-family: noto-sans;
    }

    .news_date {
        font-family: teko;
        font-size: 12px;
        margin: 0px 0px 8px;
        text-decoration: none;
        color: grey;
        padding-left: 10px;
        padding-right: 10px;
    }

    .news_category {
        font-size: 10px;
        color: #000000;
    }

    .news_title {
        font-family: noto-sans;
        font-size: 14px;
        text-decoration: none;
        color: black;
        padding-left: 10px;
        padding-right: 10px;
    }

    .news_arrow_area {
        width: 620px;
        max-width: 100%;
        height: 40px;
        margin: 0 auto;

    }

}

@media screen and (max-width: 428px) {

    .news_main_title {
        width: 428px;
        max-width: 100%;
        height: 60px;
        margin: 0 auto;
        font-size: 35px;
        font-weight: 800;

    }

    .news_area_inner {
        width: 340px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 5px 10px;
    }

    .news_box {
        width: 320px;
        max-width: 100%;
        margin: 0 auto;
        font-family: noto-sans;
    }

    .news_date {
        font-family: teko;
        font-size: 11px;
        margin: 0px 0px 8px;
        text-decoration: none;
        color: grey;
        padding-left: 10px;
        padding-right: 10px;
    }

    .news_category {
        font-size: 10px;
        color: #000000;
    }

    .news_title {
        font-family: noto-sans;
        font-size: 10px;
        text-decoration: none;
        color: black;
        padding-left: 10px;
        padding-right: 10px;
    }

    .news_arrow_area {
        width: 290px;
        max-width: 100%;
        height: 40px;
        margin: 0 auto;


    }

}

.footer {
    padding: 0 !important;
}

/*partner_hr*/
.partner_swiper {
    height: 70px;
    padding-top: 10px;
    position: relative;
}

.partner_hr1 {
    height: 3px;
    border: none;
    border-top: 1px solid #d0d0d0;
}

.partner_hr2 {
    height: 3px;
    border: none;
    border-top: 1px solid #d0d0d0;
}

.partners_logos {
    display: flex;
    justify-content: center;
    width: 70px;
    height: 70px;
    position: absolute;
    text-align: center;
    top: 0;
    right: 50%;
    left: 50%;
    background-color: #FFF;
}

.partner_logo {
    width: 40px;
    height: auto;
    position: absolute;
    align-content: center;
    margin-top: 6%;
}

/* スライドの動き等速 */
.swiper-wrapper {
    transition-timing-function: linear;
}

/* 画像のサイズ調整 */
.partner_slide img {
    width: auto;
    height: 70px;
}

@media screen and (max-width: 900px) {
    .partner_slide img {
        width: auto;
        height: 50px;
    }
}

@media screen and (max-width: 600px) {
    .partner_slide img {
        width: auto;
        height: 20px;
    }
}

/*main_swiper*/

/*main_swiper*/

/* スライドの動き等速 */
.swiper-wrapper {
    transition-timing-function: linear;

}

/* 画像のサイズ調整 */


.swiper-slide .mv_slide img {

    width: 1152px;
    height: 648px;


    /*padding-top: 100vw;*/
}

.mv {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 705px;
}

.mv:before,
.mv:after {
    content: '';
    display: block;
    width: 50%;
    height: 648px;
    background-color: black;
    opacity: 0.702;
    position: absolute;
    top: 0;
    z-index: 9;
}

.mv:before {
    left: -webkit-calc(50% - (50% + (1152px / 2)));
    left: -moz-calc(50% - (50% + (1152px / 2)));
    left: calc(50% - (50% + (1152px / 2)));
}

.mv:after {
    right: -webkit-calc(50% - (50% + (1152px / 2)));
    right: -moz-calc(50% - (50% + (1152px / 2)));
    right: calc(50% - (50% + (1152px / 2)));
}

.swiper2 {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 1152px;
    margin: 0 auto;
    overflow: visible !important;
}

.swiper2 .swiper-slide {
    width: 1152px;
    height: 648px;
}

.swiper2 .swiper-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
}

.swiper2--content {
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: contain;
    background-size: contain;
    overflow: hidden;
    width: 100%;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.swiper2--content a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.swiper2 .inner {
    height: 100%;
}

.swiper-pagination {
    background-color: black;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65px;
}

.swiper-pagination-bullet {
    background: grey;
    width: 22px;
    height: 4px;
    border-radius: 0;
    transition: opacity 1s ease;
}

@media screen and (max-width: 767px) {
    .swiper2 .swiper-slide {
        width: 100%;
        max-width: 768px;
        height: 389px;
    }

    .mv {
        width: 100%;
        overflow: hidden;
        position: relative;
        height: 430px;
    }

}

@media screen and (max-width: 600px) {
    .swiper2 .swiper-slide {
        width: 100%;
        max-width: 768px;
        height: 206px;
    }

    .mv {
        width: 100%;
        overflow: hidden;
        position: relative;
        height: 260px;
    }
}


/*school_menu*/

.school_menu {
    background-color: #bebebe;
    width: 100%;
    height: 170px;
    padding: 10px 10px 0px 10px;
}

.school_join {
    height: 40px;
    width: 500px;
    background-color: #25603b;
    border-radius: 20px;
    color: #fff;
    font-size: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    box-shadow: 7px 5px 5px grey;
    margin: 10px auto;
}

.school_join:hover {
    transform: scale(1.01);
    font-size: 25px;
    /* 拡大 */
}

.club_introduction {
    display: flex;
    height: 40px;
    width: 500px;
    background-color: #25603b;
    border-radius: 20px;
    color: #fff;
    font-size: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    box-shadow: 7px 5px 5px grey;
    margin: 10px auto;
}

.club_introduction:hover {
    transform: scale(1.01);
    font-size: 25px;
    /* 拡大 */
}

.school_training_day {
    display: flex;
    height: 40px;
    width: 500px;
    background-color: #25603b;
    border-radius: 20px;
    color: #fff;
    font-size: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    box-shadow: 7px 5px 5px grey;
    margin: 10px auto;
}

.school_training_day:hover {
    transform: scale(1.01);
    font-size: 25px;
    /* 拡大 */
}

@media screen and (max-width: 900px) {
    .school_menu {
        background-color: #bebebe;
        width: 100%;
        height: 170px;
        padding: 10px 10px 0px 10px;
    }

    .school_join {
        height: 40px;
        width: 300px;
        background-color: #25603b;
        border-radius: 20px;
        color: #fff;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: transform 0.3s ease;
        box-shadow: 7px 5px 5px grey;
        margin: 10px auto;
    }

    .school_join:hover {
        transform: scale(1.01);
        font-size: 20px;
        /* 拡大 */
    }

    .club_introduction {
        display: flex;
        height: 40px;
        width: 300px;
        background-color: #25603b;
        border-radius: 20px;
        color: #fff;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: transform 0.3s ease;
        box-shadow: 7px 5px 5px grey;
        margin: 10px auto;
    }

    .club_introduction:hover {
        transform: scale(1.01);
        font-size: 20px;
        /* 拡大 */
    }

    .school_training_day {
        display: flex;
        height: 40px;
        width: 300px;
        background-color: #25603b;
        border-radius: 20px;
        color: #fff;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: transform 0.3s ease;
        box-shadow: 7px 5px 5px grey;
        margin: 10px auto;
    }

    .school_training_day:hover {
        transform: scale(1.01);
        font-size: 20px;
        /* 拡大 */
    }
}

/*school_swiper  */

.container_swiper {
    width: 100%;
    height: 450px;
    position: relative;
}


* {
    font-family: verdana;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container_swiper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #063116;
    /*
    background-image: url(https://craques2008.com/wp-content/uploads/2025/02/background_image-scaled.jpg);
    background-repeat: no-repeat;
    background-position:center;
*/
}

/*
.container_swiper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}*/

.card-wrapper {
    max-width: 1100px;
    margin: 0 60px 0px;
    padding: 20px 10px;
    overflow: hidden;
}

.card-list .card-item {
    list-style: none;
}

.card-list .card-item .card-link {
    user-select: none;
    display: block;
    background: #fff;
    padding: 18px;
    border-radius: 12px;
    text-decoration: none;
    border: 2px solid transparent;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
    transition: 0.2s ease;
}

.card-list .card-item .card-link:active {
    cursor: grabbing;
}

.card-list .card-item .card-link:hover {
    border-color: #5372f0;
}

.card-list .card-link .card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
}

.card-list .card-link .badge {
    color: blue;
    margin: 16px 0 18px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 0.95rem;
    background: #dde4ff;
    width: fit-content;
    border-radius: 50px;
}

.card-list .card-link .card-title {
    font-size: 16px;
    color: #000;
    font-weight: 100;
}

.card-wrapper .swiper-pagination-bullet {
    height: 13px;
    width: 13px;
    opacity: 0.5;
    background: #5372f0;
}

.card-wrapper .swiper-pagination-bullet-active {
    opacity: 1;
}

.card-wrapper .swiper-slide-button {
    color: #5372f0;
    margin-top: -35px;
}

@media screen and (max-width: 768px) {
    .card-wrapper {
        margin: 0 10px 0px;
    }

    .card-wrapper .swiper-slide-button {
        display: none;
    }
}

div.swiper-button-next,
div.swiper-button-prev {
    width: var(--swiper-navigation-size);
    border: 3px solid #ffffff;
    border-radius: 50px;
    z-index: 90;
    color: #000000 !important;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 3px 0;
}

div.swiper-button-prev:after,
div.swiper-container-rtl .swiper-button-next:after,
div.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 20px;
    font-weight: bold;
}

/* adlt_training_day */

.adlt_taraining_day {
    background-color: #dddada;
    padding-top: 20px;
}

.adlt_training_day_inner {
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    font-family: noto-sans;
    padding: 10px 20px;
}

.price_info {
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    font-family: noto-sans;
    margin-top: 20px
}

.trainingday_title {
    position: relative;
    padding: 0.25em 0;
    width: 80%;
    height: auto;
    font-weight: bold;
    font-size: 23px;
}

.trainingday_category {
    font-size: 20px;
    margin-bottom: 20px;
}

.trainingday_week {
    font-size: 18px;
}

.top_calendar {
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 20px;
}

/* trainingday_price_info */
table {
    width: 1040px;
    text-align: left;
    position: relative;
    border-collapse: collapse;
    background-color: #f6f6f6;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 14px;
    text-align: center;
}

/* Spacing */

td,
th {
    border: 1px solid black;
    padding: 10px;
}

th {
    background: grey;
    color: #fff;
    border-radius: 0;
    position: sticky;
    top: 0;
    padding: 10px 10px 10px 10px;
    text-align: center;
}

td {
    background: #FFF;
    color: #000;
    border-radius: 0;
    position: sticky;
    top: 0;
    padding: 10px;
    text-align: center;
}

.primary {
    background-color: #000000
}

@media screen and (max-width: 900px) {

    .adlt_taraining_day {
        background-color: #dddada;
    }

    .adlt_training_day_inner {
        width: 487px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 20px;
    }

    .price_info {
        width: 487px;
        max-width: 100%;
        margin: 0 auto;
        font-family: noto-sans;
        margin-top: 20px
    }

    .trainingday_title {
        position: relative;
        padding: 0.25em 0;
        width: 80%;
        height: auto;
        font-weight: bold;
        font-size: 20px;
    }

    .trainingday_category {
        font-size: 17px;
    }

    .trainingday_week {
        font-size: 15px;
    }


    .top_calendar {
        width: 487px;
        max-width: 100%;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* trainingday_price_info */
    table {
        width: 487px;
        max-width: 100%;
        text-align: left;
        position: relative;
        border-collapse: collapse;
        background-color: #f6f6f6;
        margin: 0 auto;
        margin-top: 20px;
        font-size: 8px;
        text-align: center;
    }

    /* Spacing */

    td,
    th {
        border: 1px solid black;
        padding: 10px;
    }

    th {
        background: grey;
        color: #fff;
        border-radius: 0;
        position: sticky;
        top: 0;
        text-align: center;
    }

    td {
        background: #FFF;
        color: #000;
        border-radius: 0;
        position: sticky;
        top: 0;
        text-align: center;
    }

    .primary {
        background-color: #000000
    }
}

.trainingday_title:after {
    content: "";
    display: block;
    height: 4px;
    background: -webkit-linear-gradient(to right, rgb(41, 95, 59), transparent);
    background: linear-gradient(to right, rgb(41, 95, 59), transparent);

}

.trainingday_category {
    padding: 0.25em 0.5em;
    /*上下 左右の余白*/
    color: #111;
    /*文字色*/
    background: transparent;
    /*背景透明に*/
    border-left: solid 5px #295f3b;
    /*左線*/
    font-weight: bold;
}



/* contact */

.contact_body {
    background-color: #dddada;
    padding-top: 20px;
    padding-bottom: 20px;
}

.button_contact {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 30px;
    margin: 0 auto;
    margin-top: 5px;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    background-color: #25603b;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    font-size: 15px;
}

.button_contact:hover {
    background-color: #063116;
    color: #fff;
}

.contact_inner {
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    font-family: noto-sans;
    padding: 10px 20px;
}

.contact_main {
    font-family: noto-sans;
    font-size: 15px;
    padding-bottom: 5px;
    text-align: center;
}

.contact_menu {
    font-family: noto-sans;
    font-size: 13px;
    text-align: center;
}

.mail_adress {
    color: #5372f0;
}

@media screen and (max-width: 900px) {

    .contact_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .contact_inner {
        width: 487px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 20px;
    }

    .contact_main {
        font-family: noto-sans;
        font-size: 12px;
        padding-bottom: 3px;
        text-align: center;
    }

    .contact_menu {
        font-family: noto-sans;
        font-size: 10px;
        text-align: center;
    }

    .mail_adress {
        color: #5372f0;
    }
}

/* recruitment */
.recruit_category {
    padding-bottom: 10px;
}

.recruit_sub_title {
    padding-bottom: 10px;
}

.recruitment_body {
    background-color: #dddada;
    padding-top: 20px;
    padding-bottom: 20px;
}

.recruitment_inner {
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    font-family: noto-sans;
    padding: 10px 20px;
}

.rec_sub_title {
    font-family: noto-sans;
    font-size: 15px;
    padding-bottom: 3px;
}

.rec_category {
    font-family: noto-sans;
    font-size: 15px;
    font-weight: bold;
}

.rec_category:after {
    content: "";
    display: block;
    height: 4px;
    background: -webkit-linear-gradient(to right, rgb(41, 95, 59), transparent);
    background: linear-gradient(to right, rgb(41, 95, 59), transparent);

}

.rec_category {
    font-family: noto-sans;
    font-size: 15px;
    padding-bottom: 5px;
}

.rec_sub_category {
    font-family: noto-sans;
    font-size: 15px;
    padding: 0.25em 0.5em;
    /*上下 左右の余白*/
    color: #111;
    /*文字色*/
    background: transparent;
    /*背景透明に*/
    border-left: solid 5px #295f3b;
    /*左線*/
    font-weight: bold;
    padding-bottom: 5px;
}

.rec_content {
    font-family: noto-sans;
    font-size: 13px;
    padding-bottom: 5px;
}

.mail_adress {
    color: #5372f0;
}

.button_rec_trainingday {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 30px;
    border: none;
    border-radius: 5px;
    background-color: #25603b;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.button_rec_trainingday:hover {
    background-color: #063116;
    color: #fff;
}

.button_rec_trainingday2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 30px;
    border: none;
    border-radius: 5px;
    background-color: #25603b;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    margin: 10px 0px 10px 0px;
}

.button_rec_trainingday2:hover {
    background-color: #063116;
    color: #fff;
}

@media screen and (max-width: 900px) {

    .recruitment_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .recruitment_inner {
        width: 468px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 20px;
    }

    .rec_sub_title {
        font-family: noto-sans;
        font-size: 12px;
        padding-bottom: 3px;
    }

    .rec_category {
        font-family: noto-sans;
        font-size: 12px;
        font-weight: bold;
    }

    .rec_category {
        font-family: noto-sans;
        font-size: 12px;
        padding-bottom: 5px;
    }

    .rec_content {
        font-family: noto-sans;
        font-size: 10px;
        padding-bottom: 5px;
    }

    .mail_adress {
        color: #5372f0;
    }
}

/* partner */
.partner_img {
    width: 200px;
    height: 60px;
}

.partner_body {
    background-color: #dddada;
    padding-top: 20px;
    padding-bottom: 20px;
}

.partner_inner {
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    font-family: noto-sans;
    padding: 10px 20px;
}

#box_official h4 {
    text-align: center;
    font-size: 1.4rem;
    position: relative;
    /* border-top: 1px solid #cccccc; */
}

#box_official h4:after {
    content: '';
    display: block;
    width: 100%;
    border-top: 1px solid #cccccc;
    /*z-index: -1;*/
    position: absolute;
    top: 0.5em;
    left: 0;
}

#box_official h4 span {
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    color: #fff;
    line-height: 1;
    position: relative;
    margin-bottom: 0.8em;
    z-index: 9;

}

#box_official h4 span:after {
    content: '';
    display: block;
    width: 12em;
    height: 2em;
    background-color: #242222;
    position: absolute;
    top: -0.5em;
    left: calc(50% - 6em);
    z-index: -1;
    transform: skew(-20deg);
}

#box_official #asian_regional h4 span:after {
    width: 16em;
    left: calc(50% - 8em);
}

.player_box {
    width: 1000px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    /*background-color: black;*/
}

.player_list {
    width: 230px;
    height: 100px;
    margin: 0 auto;
    /*background-color: red;*/
    /*border: solid 1px black;*/
    text-align: center;
    list-style-type: none;
}

@media screen and (max-width: 900px) {

    .player_box {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        /*background-color: black;*/
    }

    .partner_inner {
        width: 750px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 20px;
    }

    .partner_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .partner_img {
        width: 100px;
        height: 30px;
    }

    .player_list {
        width: 160px;
        height: 80px;
        margin: 0 auto;
        /*background-color: red;*/
        /*border: solid 1px black;*/
        text-align: center;
    }

}

@media screen and (max-width: 468px) {
    #box_official h4 span {
        display: block;
        font-family: "Roboto", sans-serif;
        font-size: 1.0rem;
        font-weight: normal;
        color: #fff;
        line-height: 1;
        position: relative;
        margin-bottom: 0.8em;
        z-index: 9;

    }

    #box_official h4 {
        text-align: center;
        font-size: 0.9rem;
        position: relative;
        /* border-top: 1px solid #cccccc; */
    }

    .player_box {
        width: 350px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        /*background-color: black;*/
        padding-left: 25px;
    }

    .partner_inner {
        width: 350px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 20px;
    }

    .partner_img {
        width: 100px;
        height: 30px;
    }

    .player_list {
        width: 130px;
        height: 50px;
        margin: 0 auto;
        /*background-color: red;*/
        /*border: solid 1px black;*/
        text-align: center;
    }

    .partner_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
    }

}

/* DEP */

.hp_banner {
    width: 100%;
}

.dep_body {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
}

.dep_inner {
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    font-family: sans-serif;
    padding: 10px 20px;

}

.dep_index {
    width: 1000px;
    font-size: 14px;
    padding-bottom: 10px;
    display: flex;
}

.dep_explanation {
    font-family: not-sans;

}

.dep_bold {
    font-weight: 900;
}

.dep_premier {
    width: 290px;
    height: auto;

}

.dep_movie {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.dep_movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dep_player {
    font-family: sans-serif;
    font-size: 25px;
    margin-top: 20px;
}

.dep_player_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.dep_player_content_inner {
    width: 300px;
    height: 450px;
}

.dep_player_photo {
    width: 300px;
    height: auto;
}

.dep_player_name {
    color: #102e52;
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    padding: 10px;
}

.dep_player_detail {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

@media screen and (max-width: 900px) {

    .hp_banner {
        width: 100%;
    }

    .dep_body {
        background-color: #fff;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .dep_inner {
        width: 468px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: sans-serif;
        padding: 10px 20px;

    }

    .dep_index {
        width: 100%;
        font-size: 12px;
        padding-bottom: 10px;
        display: flex;
        flex-wrap: wrap;

    }

    .dep_explanation {
        font-family: not-sans;

    }

    .dep_bold {
        font-weight: 900;
    }

    .dep_premier {
        width: 200px;
        height: auto;

    }

    .dep_movie {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }

    .dep_movie iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .dep_player {
        font-family: sans-serif;
        font-size: 25px;
        margin-top: 20px;
    }

    .dep_player_content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .dep_player_content_inner {
        width: 300px;
        height: 450px;
    }

    .dep_player_photo {
        width: 300px;
        height: auto;
    }

    .dep_player_name {
        color: #102e52;
        font-size: 25px;
        font-weight: 600;
        text-align: center;
        padding: 10px;
    }

    .dep_player_detail {
        font-size: 15px;
        font-weight: 600;
        text-align: center;
    }
}

/* join */
.join_body {
    background-color: #dddada;
    padding-top: 20px;
    padding-bottom: 20px;
    z-index: -3;
}

.join_inner {
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    font-family: noto-sans;
    padding: 10px 20px;
    z-index: -2;
}

.stepbar {
    margin: 0 auto;
    width: 100%;
}

.stepbar .stepbarwrap {
    margin: 2em 0;
    position: relative;
}

.stepbar .stepbarwrap .steptitle {
    display: inline-flex;
    align-items: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle {
    display: inline-block;
    width: 3em;
    height: 3em;
    content: "";
    border-radius: 50%;
    background-color: #25603b;
    color: #fff;
    text-align: center;
    z-index: 3;
}

.stepcircle2 {
    display: inline-block;
    width: 3em;
    height: 3em;
    content: "";
    border-radius: 50%;
    background-color: #102e52;
    color: #fff;
    text-align: center;
    z-index: 2;
}

.stepbar .stepbarwrap .steptitle .stepcircle span {
    display: inline-block;
    line-height: 1.2em;
    font-size: 0.8em;
    font-weight: bold;
    position: relative;
    top: 0.9em;
    z-index: 2;
}

.stepcircle2 span {
    display: inline-block;
    line-height: 1.2em;
    font-size: 1.5em;
    font-weight: bold;
    position: relative;
    top: 0.6em;
    z-index: 1;
}

.stepbar .stepbarwrap .steptitle .title {
    margin: 0.5em;
    font-weight: bold;
    font-size: 1.2em;
}

.stepbar .stepbarwrap .steptxt {
    padding-left: 1.5em;
    margin-left: 70px;
    width: 900px;
}

.stepbar .stepbarwrap .steptxt .txt {
    font-size: 0.7em;
}

.stepbar .stepbarwrap .stepline {
    width: 2px;
    height: calc(100% + 1em);
    background-color: #ddd;
    position: absolute;
    top: 1em;
    left: 1.5em;
    z-index: 2;
}

.stepbarwrap:last-of-type .stepline:last-of-type {
    display: none;
}

/* button_join*/

.button_join {

    width: 300px;
    height: 15px;
    margin: 0 auto;
    padding: 0.5em 0.5em;
    border: none;
    border-radius: 10px;
    background-color: #1ea04d;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    font-size: 15px;
}

.button_join:hover {
    background-color: #063116;
    color: #fff;
}

/*@media screen and (max-width: 960px) {
    .stepbar {
        width: 90%;
    }
}*/

@media screen and (max-width: 900px) {
    /* join */

    .join_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
        z-index: -3;
    }

    .join_inner {
        width: 648px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 20px;
        z-index: -2;
    }

    .stepbar .stepbarwrap .steptxt {
        padding-left: 2.5em;
        margin-left: 70px;
        width: 80%;
    }

    .stepbar .stepbarwrap .steptitle .title {
        margin: 1.0em;
        font-weight: bold;
        font-size: 1.2vh;
        margin-left: 5px;
    }

    .stepbar .stepbarwrap .steptitle .stepcircle {
        display: inline-block;
        width: 3em;
        height: 3em;
        content: "";
        border-radius: 50%;
        background-color: #25603b;
        color: #fff;
        text-align: center;
        z-index: 3;
    }

    .stepcircle2 {
        display: inline-block;
        width: 3em;
        height: 3em;
        content: "";
        border-radius: 50%;
        background-color: #102e52;
        color: #fff;
        text-align: center;
        z-index: 2;
    }

    .stepbar .stepbarwrap .steptitle .stepcircle span {
        display: inline-block;
        line-height: 1.2em;
        font-size: 0.8em;
        font-weight: bold;
        position: relative;
        top: 0.9em;
        z-index: 2;
    }

    .stepcircle2 span {
        display: inline-block;
        line-height: 1.2em;
        font-size: 1.5em;
        font-weight: bold;
        position: relative;
        top: 0.6em;
        z-index: 1;
    }

}

/* facility */

.facility_body {
    background-color: #dddada;
    padding-top: 20px;
    padding-bottom: 20px;
    z-index: -3;
}

.facility_inner {
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    font-family: noto-sans;
    padding: 10px 20px;
    z-index: -2;
}

.facility_img {
    width: 640px;
    height: 427px;

}

.academy_acility {
    font-family: noto-sans;
    font-size: 15px;
    font-weight: bold;
}

.academy_acility:after {
    content: "";
    display: block;
    height: 4px;
    background: -webkit-linear-gradient(to right, rgb(41, 95, 59), transparent);
    background: linear-gradient(to right, rgb(41, 95, 59), transparent);
    margin-bottom: 20px;
}

.access {
    font-family: noto-sans;
    font-size: 15px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.access {
    font-family: noto-sans;
    font-size: 15px;
    padding: 0.25em 0.5em;
    /*上下 左右の余白*/
    color: #111;
    /*文字色*/
    background: transparent;
    /*背景透明に*/
    border-left: solid 5px #295f3b;
    /*左線*/
    font-weight: bold;
    padding-bottom: 5px;
}

.facilitys {
    font-size: 20px;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
    margin-top: 1em;
    margin-bottom: 0.5em;
    color: #ffffff;
    background: #295f3b;
}

.address {
    font-size: 15px;
    padding: 5px 10px 5px 10px;
}

@media screen and (max-width: 900px) {
    .facility_inner {
        width: 750px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 20px;
        z-index: -2;
    }
}

@media screen and (max-width: 600px) {
    .facility_inner {
        width: 375px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 20px;
        z-index: -2;
    }

    .facility_img {
        width: 331px;
        height: 220px;
    }

    .access {
        font-family: noto-sans;
        font-size: 13px;
        padding: 0.25em 0.5em;
        /*上下 左右の余白*/
        color: #111;
        /*文字色*/
        background: transparent;
        /*背景透明に*/
        border-left: solid 5px #295f3b;
        /*左線*/
        font-weight: bold;
        padding-bottom: 5px;
    }

    .facilitys {
        font-size: 13px;
        font-weight: bold;
        padding: 5px 10px 5px 10px;
        margin-top: 1em;
        margin-bottom: 0.5em;
        color: #ffffff;
        background: #295f3b;
    }

    .address {
        font-size: 11px;
        padding: 5px 10px 5px 10px;
    }
}

/* concept */

.concept_body {
    background-color: #dddada;
    padding-top: 20px;
    padding-bottom: 20px;
    z-index: -3;
}

.concept_inner {
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    font-family: noto-sans;
    padding: 10px 20px;
    z-index: -2;
}

.concept_img {
    width: 947px;
    height: 456px;
    margin-bottom: 25px;
}

.concept_guideline:after {
    content: "";
    display: block;
    height: 4px;
    background: -webkit-linear-gradient(to right, rgb(41, 95, 59), transparent);
    background: linear-gradient(to right, rgb(41, 95, 59), transparent);
    margin-bottom: 10px;
}

.access {
    font-family: noto-sans;
    font-size: 15px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.concept_guideline2 {
    font-family: noto-sans;
    font-size: 15px;
    padding: 0.25em 0.5em;
    /*上下 左右の余白*/
    color: #111;
    /*文字色*/
    background: transparent;
    /*背景透明に*/
    border-left: solid 5px #295f3b;
    /*左線*/
    font-weight: bold;
    padding-bottom: 5px;
}

.concept_guideline3 {
    font-size: 20px;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
    margin-top: 1em;
    margin-bottom: 0.5em;
    color: #ffffff;
    background: #295f3b;
}

.concepts {
    font-size: 15px;
    padding: 5px 10px 5px 10px;
}

.guideline {
    font-weight: bold;
}

.video-row {
    display: flex;
}

.video-col {
    aspect-ratio: 16 / 9;
    max-width: 600px;
}

.video-col iframe {
    width: 450px;
    height: 253px;
    margin: 10px;
}

@media screen and (max-width: 900px) {
    .concept_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
        z-index: -3;
    }

    .concept_inner {
        width: 648px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 20px;
        z-index: -2;
    }

    .concept_img {
        width: 600px;
        height: 288px;
        margin-bottom: 25px;
    }

    .concept_guideline:after {
        content: "";
        display: block;
        height: 4px;
        background: -webkit-linear-gradient(to right, rgb(41, 95, 59), transparent);
        background: linear-gradient(to right, rgb(41, 95, 59), transparent);
        margin-bottom: 10px;
        font-size: 10px;
    }

    .access {
        font-family: noto-sans;
        font-size: 10px;
        padding-bottom: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .concept_guideline2 {
        font-family: noto-sans;
        font-size: 10px;
        padding: 0.25em 0.5em;
        /*上下 左右の余白*/
        color: #111;
        /*文字色*/
        background: transparent;
        /*背景透明に*/
        border-left: solid 5px #295f3b;
        /*左線*/
        font-weight: bold;
        padding-bottom: 5px;
    }

    .concept_guideline3 {
        font-size: 15px;
        font-weight: bold;
        padding: 5px 10px 5px 10px;
        margin-top: 1em;
        margin-bottom: 0.5em;
        color: #ffffff;
        background: #295f3b;
    }

    .concepts {
        font-size: 10px;
        padding: 5px 10px 5px 10px;
    }

    .guideline {
        font-weight: bold;
    }

    .video-row {
        display: flex;
    }

    .video-col {
        aspect-ratio: 16 / 9;
        max-width: 600px;
    }

    .video-col iframe {
        width: 300px;
        height: 169px;
        margin: 3px;
    }
}

@media screen and (max-width: 600px) {
    .concept_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
        z-index: -3;
    }

    .concept_inner {
        width: 375px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 20px;
        z-index: -2;
    }

    .concept_img {
        width: 330px;
        height: 158px;
        margin-bottom: 25px;
    }

    .concept_guideline:after {
        content: "";
        display: block;
        height: 4px;
        background: -webkit-linear-gradient(to right, rgb(41, 95, 59), transparent);
        background: linear-gradient(to right, rgb(41, 95, 59), transparent);
        margin-bottom: 10px;
        font-size: 10px;
    }

    .access {
        font-family: noto-sans;
        font-size: 10px;
        padding-bottom: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .concept_guideline2 {
        font-family: noto-sans;
        font-size: 10px;
        padding: 0.25em 0.5em;
        /*上下 左右の余白*/
        color: #111;
        /*文字色*/
        background: transparent;
        /*背景透明に*/
        border-left: solid 5px #295f3b;
        /*左線*/
        font-weight: bold;
        padding-bottom: 5px;
    }

    .concept_guideline3 {
        font-size: 15px;
        font-weight: bold;
        padding: 5px 10px 5px 10px;
        margin-top: 1em;
        margin-bottom: 0.5em;
        color: #ffffff;
        background: #295f3b;
    }

    .concepts {
        font-size: 10px;
        padding: 5px 10px 5px 10px;
    }

    .guideline {
        font-weight: bold;
    }

    .video-row {
        display: inline;
    }

    .video-col {
        aspect-ratio: 16 / 9;
        max-width: 300px;
    }

    .video-col iframe {
        width: 300px;
        height: 169px;
        margin: 3px;
    }
}

/* club */
.club_body {
    background-color: #dddada;
    padding-top: 20px;
    padding-bottom: 20px;
}

.club_inner {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    background-color: #fff;
    font-family: noto-sans;
    padding: 10px 0px;
}

.club_logo {
    width: 100%;
    max-width: 1040px;
    height: auto;
    text-align: center;
}

.craques_club_logo {
    width: 150px;
    height: auto;
}

.club_name {
    font-size: 20px;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    padding-top: 5px;
}

.club_content {
    width: 600px;
    font-size: 13px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding-top: 5px;
    margin: 0 auto;
}

.txt_green {
    font-size: 15px;
    font-weight: bold;
    color: green;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding-top: 5px;
}

.txt_red {
    font-size: 15px;
    font-weight: bold;
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding-top: 5px;
}

.mission_vision {
    width: 600px;
    font-size: 13px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding-top: 5px;
    margin: 0 auto;
}

.mission_title {
    padding: 5px 25px;
    position: relative;
    font-size: 15px;
    font-weight: bold;
}

.mission_content {
    padding-left: 25px;
    padding-bottom: 10px;
}

.mission_title::before,
.mission_title::after {
    content: "";
    display: block;
    position: absolute;
}

.mission_title::before {
    left: 0;
    top: 0;
    width: 10px;
    height: 30px;
    background: #ccc;
    transform: skewX(-20deg);
}

.vision_title {
    padding: 5px 25px;
    position: relative;
    font-size: 15px;
    font-weight: bold;
}

.vision_content {
    padding-left: 25px;
    padding-bottom: 10px;
}

.vision_title::before,
.vision_title::after {
    content: "";
    display: block;
    position: absolute;
}

.vision_title::before {
    left: 0;
    top: 0;
    width: 10px;
    height: 30px;
    background: #ccc;
    transform: skewX(-20deg);
}

.value_title {
    padding: 5px 25px;
    position: relative;
    font-size: 15px;
    font-weight: bold;
}

.value_content {
    padding-left: 25px;
}

.club_value {
    padding-bottom: 10px;
}

.value_title::before,
.value_title::after {
    content: "";
    display: block;
    position: absolute;
}

.value_title::before {
    left: 0;
    top: 0;
    width: 10px;
    height: 30px;
    background: #ccc;
    transform: skewX(-20deg);
}

.Slogan_title {
    padding: 5px 25px;
    position: relative;
    font-size: 15px;
    font-weight: bold;
}

.Slogan_content {
    padding-left: 25px;
}

.club_Slogan {
    padding-bottom: 10px;
}

.Slogan_title::before,
.Slogan_title::after {
    content: "";
    display: block;
    position: absolute;
}

.Slogan_title::before {
    left: 0;
    top: 0;
    width: 10px;
    height: 30px;
    background: #ccc;
    transform: skewX(-20deg);
}

.club_Slogan_img {
    text-align: center;
}

.Slogan_img {
    width: 300px;
    height: 50px;
}

.profile_title {
    padding: 5px 25px;
    position: relative;
    font-size: 17px;
    font-weight: bold;
}

.profile_content {
    padding-left: 25px;
}

.club_profile {
    padding-bottom: 10px;
}

.profile_title::before,
.profile_title::after {
    content: "";
    display: block;
    position: absolute;
}

.profile_title::before {
    left: 0;
    top: 0;
    width: 10px;
    height: 30px;
    background: #ccc;
    transform: skewX(-20deg);
}

@media screen and (max-width: 900px) {
    .club_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .club_inner {
        width: 100%;
        max-width: 748px;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 0px;
    }

    .club_logo {
        width: 100%;
        max-width: 748px;
        height: auto;
        text-align: center;
    }

    .craques_club_logo {
        width: 150px;
        height: auto;
    }

    .club_name {
        font-size: 20px;
        font-weight: bold;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        text-align: center;
        padding-top: 5px;
    }

    .club_content {
        width: 600px;
        font-size: 13px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding-top: 5px;
        margin: 0 auto;
    }

    .txt_green {
        font-size: 15px;
        font-weight: bold;
        color: green;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding-top: 5px;
    }

    .txt_red {
        font-size: 15px;
        font-weight: bold;
        color: red;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding-top: 5px;
    }

    .mission_vision {
        width: 600px;
        font-size: 13px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding-top: 5px;
        margin: 0 auto;
    }

    .mission_title {
        padding: 5px 25px;
        position: relative;
        font-size: 15px;
        font-weight: bold;
    }

    .mission_content {
        padding-left: 25px;
        padding-bottom: 10px;
    }

    .mission_title::before,
    .mission_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .mission_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }

    .vision_title {
        padding: 5px 25px;
        position: relative;
        font-size: 15px;
        font-weight: bold;
    }

    .vision_content {
        padding-left: 25px;
        padding-bottom: 10px;
    }

    .vision_title::before,
    .vision_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .vision_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }

    .value_title {
        padding: 5px 25px;
        position: relative;
        font-size: 15px;
        font-weight: bold;
    }

    .value_content {
        padding-left: 25px;
    }

    .club_value {
        padding-bottom: 10px;
    }

    .value_title::before,
    .value_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .value_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }

    .Slogan_title {
        padding: 5px 25px;
        position: relative;
        font-size: 15px;
        font-weight: bold;
    }

    .Slogan_content {
        padding-left: 25px;
    }

    .club_Slogan {
        padding-bottom: 10px;
    }

    .Slogan_title::before,
    .Slogan_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .Slogan_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }

    .club_Slogan_img {
        text-align: center;
    }

    .Slogan_img {
        width: 300px;
        height: 50px;
    }

    .profile_title {
        padding: 5px 25px;
        position: relative;
        font-size: 17px;
        font-weight: bold;
    }

    .profile_content {
        padding-left: 25px;
    }

    .club_profile {
        padding-bottom: 10px;
    }

    .profile_title::before,
    .profile_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .profile_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }
}

@media screen and (max-width: 600px) {
    .club_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .club_inner {
        width: 100%;
        max-width: 375px;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 0px;
    }

    .club_logo {
        width: 100%;
        max-width: 375px;
        height: auto;
        text-align: center;
    }

    .craques_club_logo {
        width: 100px;
        height: auto;
    }

    .club_name {
        font-size: 15px;
        font-weight: bold;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        text-align: center;
        padding-top: 5px;
    }

    .club_content {
        width: 350px;
        font-size: 10px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding-top: 5px;
        margin: 0 auto;
    }

    .txt_green {
        font-size: 12px;
        font-weight: bold;
        color: green;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding-top: 5px;
    }

    .txt_red {
        font-size: 12px;
        font-weight: bold;
        color: red;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding-top: 5px;
    }

    .mission_vision {
        width: 350px;
        font-size: 13px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding-top: 5px;
        margin: 0 auto;
    }

    .mission_title {
        padding: 5px 25px;
        position: relative;
        font-size: 15px;
        font-weight: bold;
    }

    .mission_content {
        padding-left: 25px;
        padding-bottom: 10px;
        font-size: 10px;
    }

    .mission_title::before,
    .mission_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .mission_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }

    .vision_title {
        padding: 5px 25px;
        position: relative;
        font-size: 15px;
        font-weight: bold;
    }

    .vision_content {
        padding-left: 25px;
        padding-bottom: 10px;
        font-size: 10px;
    }

    .vision_title::before,
    .vision_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .vision_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }

    .value_title {
        padding: 5px 25px;
        position: relative;
        font-size: 15px;
        font-weight: bold;
    }

    .value_content {
        padding-left: 25px;
        font-size: 10px;
    }

    .club_value {
        padding-bottom: 10px;
    }

    .value_title::before,
    .value_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .value_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }

    .Slogan_title {
        padding: 5px 25px;
        position: relative;
        font-size: 15px;
        font-weight: bold;
    }

    .Slogan_content {
        padding-left: 25px;
    }

    .club_Slogan {
        padding-bottom: 10px;
    }

    .Slogan_title::before,
    .Slogan_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .Slogan_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }

    .club_Slogan_img {
        text-align: center;
    }

    .Slogan_img {
        width: 250px;
        height: 40px;
    }

    .profile_title {
        padding: 5px 25px;
        position: relative;
        font-size: 17px;
        font-weight: bold;
    }

    .profile_content {
        padding-left: 25px;
        font-size: 10px;
    }

    .club_profile {
        padding-bottom: 10px;
    }

    .profile_title::before,
    .profile_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .profile_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }
}

/* club～ここまで～ */

/* course */

.course_body {
    background-color: #dddada;
    padding-top: 20px;
    padding-bottom: 20px;
}

.course_inner {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    background-color: #fff;
    font-family: noto-sans;
    padding: 10px 0px;
}

.course_page_title {
    padding: 5px 25px;
    position: relative;
    font-size: 17px;
    font-weight: bold;
    margin-left: 25px;
}

.course_team_name {
    padding-left: 25px;
    font-size: 13px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin: 0 auto;
}

.course_page_title::before,
.course_page_title::after {
    content: "";
    display: block;
    position: absolute;
}

.course_page_title::before {
    left: 0;
    top: 0;
    width: 10px;
    height: 30px;
    background: #ccc;
    transform: skewX(-20deg);
}

@media screen and (max-width: 900px) {
    .course_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .course_inner {
        width: 100%;
        max-width: 748px;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 0px;
    }

    .course_page_title {
        padding: 5px 25px;
        position: relative;
        font-size: 17px;
        font-weight: bold;
        margin-left: 25px;
    }

    .course_team_name {
        padding-left: 25px;
        font-size: 13px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin: 0 auto;
    }

    .course_page_title::before,
    .course_page_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .course_page_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }
}

@media screen and (max-width: 600px) {
    .course_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .course_inner {
        width: 100%;
        max-width: 355px;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 0px;
    }

    .course_page_title {
        padding: 5px 25px;
        position: relative;
        font-size: 17px;
        font-weight: bold;
        margin-left: 25px;
    }

    .course_team_name {
        padding-left: 25px;
        font-size: 10px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin: 0 auto;
    }

    .course_page_title::before,
    .course_page_title::after {
        content: "";
        display: block;
        position: absolute;
    }

    .course_page_title::before {
        left: 0;
        top: 0;
        width: 10px;
        height: 30px;
        background: #ccc;
        transform: skewX(-20deg);
    }
}

/* course～ここまで～ */

/* memory */
.memory_body {
    background-color: #dddada;
    padding-top: 20px;
    padding-bottom: 20px;
}

.memory_inner {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    background-color: #fff;
    font-family: noto-sans;
    padding: 10px 0px;
}

.memory_container {
    width: 800px;
    margin: 50px auto;
    position: relative;
}

.memory_container:after {
    content: "";
    width: 2px;
    border-left: 2px solid #295f3b;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20%;
}

.memory_container dl {
    overflow: hidden;
}

.memory_container dt span {
    width: 15%;
    height: 40px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: #295f3b;
    line-height: 40px;
    text-align: center;
    position: relative;
    float: left;
}

/* ポイントはdtだけfloatさせること*/

.memory_container dt span:after {
    display: block;
    content: "";
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: #295f3b;
    position: absolute;
    top: 0;
    left: 100%;
}

/*　矢印部分 */

.memory_container dd {
    margin-left: 20%;
    position: relative;
    padding-top: 8px;
    padding-left: 32px;
    padding-bottom: 32px;
}

.memory_container dd:before {
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #295f3b;
    position: absolute;
    left: -7px;
    top: 12px;
}

.memory_container dd h3 {
    line-height: 1;
    margin-bottom: 5px;
    padding-top: 5px;
}

.memory_container dd p {
    line-height: 1.5;
    margin-bottom: 16px;
    font-size: 14px;
}

.memory_title {
    line-height: 1;
    margin-bottom: 5px;
    margin-top: 0px;
    font-size: 18px;
}

.memory_txt {
    line-height: 1.5;
    margin-bottom: 8px;
    margin-top: 2px;
    font-size: 14px;
}

@media screen and (max-width: 900px) {

    /* memory */
    .memory_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .memory_inner {
        width: 100%;
        max-width: 748px;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 0px;
    }

    .memory_container {
        width: 800px;
        margin: 50px auto;
        position: relative;
    }

    .memory_container:after {
        content: "";
        width: 2px;
        border-left: 2px solid #295f3b;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20%;
    }

    .memory_container dl {
        overflow: hidden;
    }

    .memory_container dt span {
        width: 15%;
        height: 40px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        background: #295f3b;
        line-height: 40px;
        text-align: center;
        position: relative;
        float: left;
    }

    /* ポイントはdtだけfloatさせること*/

    .memory_container dt span:after {
        display: block;
        content: "";
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-left-color: #295f3b;
        position: absolute;
        top: 0;
        left: 100%;
    }

    /*　矢印部分 */

    .memory_container dd {
        margin-left: 20%;
        position: relative;
        padding-top: 8px;
        padding-left: 32px;
        padding-bottom: 32px;
    }

    .memory_container dd:before {
        display: block;
        content: "";
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #295f3b;
        position: absolute;
        left: -7px;
        top: 12px;
    }

    .memory_container dd h3 {
        line-height: 1;
        margin-bottom: 5px;
        padding-top: 5px;
    }

    .memory_container dd p {
        line-height: 1.5;
        margin-bottom: 16px;
        font-size: 14px;
    }

    .memory_title {
        line-height: 1;
        margin-bottom: 5px;
        margin-top: 0px;
        font-size: 15px;
    }

    .memory_txt {
        line-height: 1.5;
        margin-bottom: 8px;
        margin-top: 2px;
        font-size: 14px;
    }
}

@media screen and (max-width: 600px) {

    /* memory */
    .memory_body {
        background-color: #dddada;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .memory_inner {
        width: 100%;
        max-width: 375px;
        margin: 0 auto;
        background-color: #fff;
        font-family: noto-sans;
        padding: 10px 0px;
    }

    .memory_container {
        width: 350px;
        margin: 50px auto;
        position: relative;
    }

    .memory_container:after {
        content: "";
        width: 2px;
        border-left: 2px solid #295f3b;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20%;
    }

    .memory_container dl {
        overflow: hidden;
    }

    .memory_container dt span {
        width: 13%;
        height: 21px;
        font-size: 13px;
        font-weight: bold;
        color: #fff;
        background: #295f3b;
        line-height: 20px;
        text-align: center;
        position: relative;
        float: left;
    }

    /* ポイントはdtだけfloatさせること*/

    .memory_container dt span:after {
        display: block;
        content: "";
        width: 0;
        height: 0;
        border: 10.5px solid transparent;
        border-left-color: #295f3b;
        position: absolute;
        top: 2;
        left: 100%;
    }

    /*　矢印部分 */

    .memory_container dd {
        margin-left: 15%;
        position: relative;
        padding-top: 8px;
        padding-left: 25px;
        padding-bottom: 32px;
    }

    .memory_container dd:before {
        display: block;
        content: "";
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #295f3b;
        position: absolute;
        left: 11px;
        top: 4px;
    }

    .memory_container dd h3 {
        line-height: 1;
        margin-bottom: 5px;
        padding-top: 0px;
    }

    .memory_container dd p {
        line-height: 1.5;
        margin-bottom: 16px;
        font-size: 14px;
    }

    .memory_title {
        line-height: 1;
        margin-bottom: 5px;
        margin-top: 0px;
        font-size: 13px;
        padding-left: 5px;
    }

    .memory_txt {
        line-height: 1.5;
        margin-bottom: 8px;
        margin-top: 1px;
        font-size: 10px;
        padding-left: 5px;
    }
}

/* memory～ここまで～ */

/* ========================================
   MATCH SCHEDULE（参考サイト構造ベース）
======================================== */

.match-box {
  position: relative;
  background: #111;
  overflow: hidden;
}

/* 左側：タイトル背景エリア */
.match-box_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40px 24px 0;
}

.ttl-top h2 {
  color: #fff;
  font-family: 'Teko', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
}

/* 矢印ボタン（左エリア内） */
.swiper-btn_outer {
  position: absolute;
  top: 130px;
  left: 24px;
  z-index: 20;
  display: flex;
  gap: 8px;
}

.swiper-btn_outer .swiper-button-prev,
.swiper-btn_outer .swiper-button-next {
  position: static !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  color: #fff !important;
  flex-shrink: 0;
}

.swiper-btn_outer .swiper-button-prev::after,
.swiper-btn_outer .swiper-button-next::after {
  font-size: 14px !important;
  color: #fff;
}

/* 右側：スライダーエリア */
.match-box_outer {
  margin-left: 200px;
  padding: 0 0 20px 0;
}

.swiper_match_top {
  width: 100%;
}

/* スライド1枚 */
.swiper-slide_item {
  position: relative;
  height: 420px;
  overflow: hidden;
}

.swiper-slide_item_overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.05) 100%);
  z-index: 1;
}

.swiper-slide_item_container {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.swiper-slide_item_container .img-outer {
  width: 100%;
  height: 100%;
}

.swiper-slide_item_container .img-outer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* カード情報 */
.MatchCard {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 20px 18px 22px;
}

.swiper-slide_item_info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.match-league-text {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: #bbb;
  text-transform: uppercase;
}

.match-info_logos {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.match-info_logo {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.match-info_logo img {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  object-fit: contain !important;
  display: block;
}

.match-info_team {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.match-info_name {
  font-family: 'Teko', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: 0.04em;
}

.match-info_name._own {
  color: #fff;
}

.match-info_dates {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.match-info_date {
  font-family: 'Teko', sans-serif;
  font-size: 0.82rem;
  color: #ddd;
  line-height: 1.4;
}

.match-info_date span {
  color: #bbb;
  margin-left: 2px;
}

.match-info_kickoff {
  font-family: 'Teko', sans-serif;
  font-size: 0.82rem;
  color: #ddd;
}

.match-info_venue {
  font-size: 0.68rem;
  color: #bbb;
}

/* 試合詳細ボタン */
.match-btn {
  margin-top: 10px;
}

.btn-box._border a {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid rgba(255,165,0,0.8);
  background: rgba(255,165,0,0.1);
  color: #ffa500;
  font-size: 0.72rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.btn-box._border a:hover {
  background: #ffa500;
  color: #000;
  text-decoration: none;
}

/* 一覧リンク */
.match-box_outer .text-right {
  text-align: right;
  padding: 12px 20px 0;
}

.match-box_outer .text-right .btn._w {
  color: #aaa;
  font-size: 0.8rem;
  text-decoration: none;
  font-weight: normal;
  padding: 0;
  letter-spacing: 0.05em;
  border: none;
  background: none;
  text-transform: none;
}

.match-box_outer .text-right .btn._w:hover {
  color: #fff;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .match-box_bg { width: 100%; height: auto; position: relative; padding: 20px 20px 10px; }
  .swiper-btn_outer { position: relative; top: auto; left: auto; padding: 0 20px 10px; }
  .match-box_outer { margin-left: 0; }
  .swiper-slide_item { height: 300px; }
}


/* ========================================
   試合詳細ページ
======================================== */
.match_detail_hero {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  display: flex;
  align-items: center;
}
.match_detail_hero_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
}
.match_detail_hero_inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 40px;
  text-align: center;
  color: #fff;
}
.md_league {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: #bbb;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.md_datetime {
  font-size: 1.6rem;
  font-family: 'Teko', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 6px;
}
.md_venue { font-size: 0.85rem; color: #bbb; margin: 0 0 40px; }
.md_match_row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 20px 0 40px;
}
.md_team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 200px;
}
.md_emblem {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.md_team_name {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'Teko', sans-serif;
}
.md_score_wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.md_score {
  font-size: 4rem;
  font-weight: 900;
  font-family: 'Teko', sans-serif;
  line-height: 1;
}
.md_score_sep { font-size: 2rem; color: #aaa; font-family: 'Teko', sans-serif; }
.md_vs { font-size: 2rem; color: #aaa; font-family: 'Teko', sans-serif; font-weight: 700; }
.md_links { margin-top: 20px; }
.md_link_btn {
  display: inline-block;
  padding: 12px 32px;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  transition: background 0.2s;
}
.md_link_btn:hover { background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; }
.md_back_wrap { padding: 20px 40px; }
.md_back_link { color: #555; font-size: 0.85rem; text-decoration: none; }
.md_back_link:hover { color: #25603b; }

@media (max-width: 768px) {
  .md_match_row { gap: 20px; }
  .md_emblem { width: 60px; height: 60px; }
  .md_score { font-size: 3rem; }
  .md_team_name { font-size: 1.1rem; }
  .match_detail_hero_inner { padding: 60px 20px; }
}