@charset "utf-8";

.container { max-width: 1040px; }

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

    header

----------------------------------------------- */
header { background: #ebc013; position: relative; }
header > .container { position: relative; }
header > .container::before { content: ''; position: absolute; top: 0; background: #0094be; height: 100%; transform: skewX(10deg); z-index: 1; }
header nav.pc { position: relative; z-index: 2; margin: 0 calc(50% - 50vw); width: 100vw; }
header nav.pc ul { max-width: 1040px; margin: 0 auto; }
header nav.pc ul li { width: 100%; }
header nav.pc ul li a { display: block; color: #fff; text-align: center; text-decoration: none; padding: 8px; }

@media (min-width: 769px) and (max-width: 1100px) {
    header nav { width: calc(100% + 60px); margin-left: -30px; }
}

@media (min-width: 768px) {
    header { margin-bottom: 90px; }
    header > .container { padding: 35px 0 60px; }
    header > .container::before { width: 257px; left: 60px; }
    header nav.pc { background: #000; }
    header nav.pc ul { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
    header nav.pc ul li:nth-of-type(2) a { border-left: 1px solid #fff; border-right: 1px solid #fff; }

}

@media (max-width: 767px) {
    header { margin-bottom: 30px; }
    header > .container { padding: 30px 0 30px; }
    header > .container::before { width: 105px; left: 30px; }
    header nav.pc ul li { background: #000; }

}


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

    main

----------------------------------------------- */
main { margin-bottom: 0; }
.read { line-height: 1.715; margin-bottom: 25px; }

.player_list section { padding: 55px 0 40px; margin-bottom: 0; }
.player_list section:nth-of-type(odd) { background-image: linear-gradient( 0deg, rgba(40, 35, 34, 0.41) 0, rgba(40, 35, 34, 0.41) 1px, rgba(255, 255, 255, 1) 1px, rgba(255, 255, 255, 1) 7px ); background-size: 7px 7px; }
.player_list section:nth-of-type(even) { padding-top: 65px; }
.player_list section .container { background: #fff; position: relative; }
.player_list section .container::before { content: ''; position: absolute; top: -25px; width: 167px; height: 76px; background-image: url(../images/bg_player.png); background-repeat: no-repeat; background-size: 100%; }
.player_list section h2 { color: #363786; font-weight: bold; }
.player_list section p { font-size: 1.4rem; line-height: 1.715; }
.player_list section .catchcopy { font-weight: bold; }
.player_list section .left { position: relative; z-index: 1; }
.player_list section .right { max-width: 343px; margin: 0 auto; }
.player_list section .right .name { position: absolute; bottom: -33px; left: -4px; right: 0; margin: 0 auto; }


@media (min-width: 768px) {
    h1 { margin-left: 60px; max-width: 420px; margin-bottom: 20px; }
    .read { padding: 0 120px; font-size: 1.4rem; }
    .player_list section .container::before { left: -15px; }
    .player_list section h2 { font-size: 1.9rem; margin-bottom: 50px; }
    .player_list section h2 span { font-size: 1.7rem; }
    .player_list section .catchcopy { font-size: 1.7rem; margin-bottom: 23px; }
    .player_list section .left { padding: 5px 420px 28px 130px; }
    .player_list section .left .text_wrap { padding-left: 15px; }
    .player_list section .right { position: absolute; top: -20px; right: -35px; }
    .player_list section .right .name { width: 352px; }

}

@media (max-width: 767px) {
    h1 { max-width: 285px; margin-bottom: 30px; }
    .read { font-size: 1.6rem; }
    .player_list section .container::before { left: -60px; }
    .player_list section h2 { font-size: 1.7rem; margin-bottom: 25px; }
    .player_list section h2 span { font-size: 1.5rem; }
    .player_list section .catchcopy { font-size: 1.5rem; margin-bottom: 12px; }
    .player_list section .left { padding: 10px; }
    .player_list section .right .name { max-width: 352px; }

}



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

    back_home

----------------------------------------------- */
#back_home { position: fixed; top: 30%; right: 0; z-index: 100; }
#back_home a { position: relative; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-decoration: none; display: inline-block; color: #fff; background: linear-gradient(to right, #0093c2, #34957c); padding: 66px 0 27px; }
#back_home a::before { content: ''; position: absolute; top: 12px; left: 0; right: 0; margin: 0 auto; background: url(../images/icon_back_home.png) no-repeat; background-size: 100%; }


@media (min-width: 768px) {
    #back_home a { width: 55px; line-height: 55px; }
    #back_home a::before { width: 36px; height: 36px; }


}

@media (max-width: 767px) {
    #back_home a { width: 40px; line-height: 40px; }
    #back_home a::before { width: 28px; height: 28px; }

}