/* CSS Document */


/*------------------------------------------------------

    header

------------------------------------------------------*/
header { background: url("../images/bg_introduction.jpg") no-repeat center center; background-size: cover;}
header h1 { text-indent: 100%; white-space: nowrap; overflow: hidden; background: url("../images/title_introduction-2.png") no-repeat left top; background-size: 100% auto; margin-left: auto; margin-right: auto; position: relative; z-index: 1;}



@media (min-width: 768px) {
    header { height: 390px;}
    header h1 { width: 816px; height: 290px; top: 175px;}
}

@media (max-width: 767px) {
    header { height: 200px; padding-top: 80px;}
    header h1 { width: 350px; height: 130px;}
}


/*------------------------------------------------------



------------------------------------------------------*/
main {}

main article {}
main article:nth-child(even) { background-color: #ccc;}
main article > .colWrap {}
main article figure { text-align: center; position: relative;}
main article figure img { width: 100%; max-width: 226px;}
main article .body { position: relative;}
main article .name { border-bottom: 1px solid #444a9c; margin-bottom: 6px;}
main article .kana { margin-bottom: 10px;}
main article .gakka { color: #444a9c;}
main article .from { margin-bottom: 10px; }
main article .score.colWrap {}
main article dl { background-color: #c1d3f2; border: 1px solid #444a9c; font-size: 1.6rem;}
main article dl dt { border-right: 1px solid #444a9c;}
main article dl dd {}
main article .record { color: #ff0000; font-size: 1.6rem; font-weight: bold; padding-top: 8px;}

main article > .colWrap.cap figure::before { content: ''; background: url("../images/icon_captain.png") no-repeat left top; width: 80px; height: 80px; background-size: 100% auto; position: absolute; left: 5px; top: 0;}
main article > .colWrap.sub figure::before { content: ''; background: url("../images/icon_sub-captain.png") no-repeat left top; width: 80px; height: 80px; background-size: 100% auto; position: absolute; left: 5px; top: 0;}


@media (min-width: 768px) {
    main { padding-top: 120px; /* margin-bottom: 150px; */}

    main article { padding: 28px 0;}
    main article figure { width: 340px;}
    main article .body { width: calc((100% - 340px) - 40px);}
    main article .name { font-size: 3.6rem; padding-left: 10px;}
    main article .kana { font-size: 2.1rem; padding-left: 10px;}
    main article .gakka { font-size: 2.1rem; position: absolute; right: 0; top: 10px;}
    main article .from { font-size: 2.1rem; padding-left: 10px;}
    main article dl { width: calc(50% - 20px);}
    main article dl dt { width: 130px; padding: 10px 5px; text-align: center;}
    main article dl dd { width: calc(100% - 130px); padding: 10px 5px; text-align: center;}
}

@media (max-width: 767px) {
    main { padding-top: 50px; margin-bottom: 100px;}

    main article { padding: 30px 0;}
    main article figure { width: 340px; margin-left: auto; margin-right: auto; margin-bottom: 10px;}
    main article .body { width: 100%;}
    main article .name { font-size: 3.2rem; text-align: center;}
    main article .kana { font-size: 1.8rem; text-align: center;}
    main article .gakka { font-size: 1.8rem; }
    main article .from { font-size: 1.8rem; }
    main article dl { width: 100%;}
    main article dl dt { width: 130px; padding: 5px 5px; text-align: center;}
    main article dl dd { width: calc(100% - 130px); padding: 5px 5px; text-align: center;}
    
    main article .record { font-size: 1.4rem; }
}


/*------------------------------------------------------

    pageTop

------------------------------------------------------*/

@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


/*------------------------------------------------------

    pageTop

------------------------------------------------------*/
#back-home { position:fixed; top: 30%; right:0; font-size:1.4rem; z-index:999; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; letter-spacing: 1px; }
#back-home a { background: #444a9c; text-decoration: none; color:#fff; width:55px; line-height: 55px; text-align:center; display: block; padding: 10px 0px 14px;  }
#back-home a span { position: relative; color: #444a9c; display: inline-block; background-color: #fff; border-radius: 50%; height: 35px; width: 35px; text-align: center; line-height: 37px; margin-bottom: 10px; letter-spacing: -1px;}
#back-home a span::before {}


@media (min-width: 768px) {
    #back-home a:hover { opacity: 0.8; }
}

@media (max-width: 767px) {
    #back-home a { width:45px; line-height: 45px; }
    #back-home a span { height: 32px; width: 32px; line-height: 34px; }
}

@media (min-width: 768px) {
.mrgB-adj { margin-bottom: 184px; }
}

@media (max-width: 767px) {
.mrgB-adj { margin-bottom: 150px; }
}